From 200717f7792d4ff073632bddf58e4af1a953cddb Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Thu, 7 Jul 2022 17:47:34 +0200
Subject: [PATCH] Making add form width dynamic based on comment count

---
 apps/comments-ui/src/components/AddForm.js     | 4 ++--
 apps/comments-ui/src/components/CommentsBox.js | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/comments-ui/src/components/AddForm.js b/apps/comments-ui/src/components/AddForm.js
index 0e27e24b3a..6bd1fe4426 100644
--- a/apps/comments-ui/src/components/AddForm.js
+++ b/apps/comments-ui/src/components/AddForm.js
@@ -52,7 +52,7 @@ const AddForm = (props) => {
     };
 
     return (
-        <form onSubmit={submitForm} onClick={handleFocus} className={`bg-white comment-form transition duration-200 rounded-md px-3 pt-3 pb-2 -ml-[13px] -mr-3 mt-8 mb-10 shadow-lg dark:bg-[rgba(255,255,255,0.08)] dark:shadow-transparent hover:shadow-xl ${focused ? 'cursor-default' : 'cursor-pointer'}`}>
+        <form onSubmit={submitForm} onClick={handleFocus} className={`bg-white comment-form transition duration-200 rounded-md px-3 pt-3 pb-2 ${props.commentsCount && '-ml-[13px] -mr-3'} mt-8 mb-10 shadow-lg dark:bg-[rgba(255,255,255,0.08)] dark:shadow-transparent hover:shadow-xl ${focused ? 'cursor-default' : 'cursor-pointer'}`}>
             <div className="w-full relative">
                 <div className="pr-3 font-sans leading-normal dark:text-neutral-300">
                     <div className="relative w-full ">
@@ -62,7 +62,7 @@ const AddForm = (props) => {
                             onChange={handleChange}
                             onFocus={handleFocus}
                             onBlur={handleBlur}
-                            autofocus={true}
+                            autoFocus={false}
                             placeholder='Join the discussion'
                         />
                         <button
diff --git a/apps/comments-ui/src/components/CommentsBox.js b/apps/comments-ui/src/components/CommentsBox.js
index 1d111fee16..616ee050b0 100644
--- a/apps/comments-ui/src/components/CommentsBox.js
+++ b/apps/comments-ui/src/components/CommentsBox.js
@@ -50,6 +50,7 @@ class CommentsBox extends React.Component {
         const comments = !this.context.comments ? 'Loading...' : this.context.comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} avatarSaturation={this.props.avatarSaturation} />);
 
         const containerClass = this.darkMode() ? 'dark' : '';
+        const commentsCount = comments.length;
 
         return (
             <section className={containerClass}>
@@ -58,7 +59,7 @@ class CommentsBox extends React.Component {
                     {comments}
                 </div>
                 <div>
-                    { this.context.member ? <AddForm avatarSaturation={this.props.avatarSaturation} /> : <NotSignedInBox /> }
+                    { this.context.member ? <AddForm commentsCount={commentsCount} avatarSaturation={this.props.avatarSaturation} /> : <NotSignedInBox /> }
                 </div>
             </section>
         );