improve style

packages/app/src/components/CommentsCard/index.jsx

@@ -150,7 +150,9 @@ export default (props) => {
             return <antd.Empty />
         }
 
-        return comments.map((comment) => {
+        return <>
+            {
+                comments.map((comment) => {
                     return <CommentCard
                         data={comment}
                         onClickDelete={handleCommentDelete}
@@ -158,6 +160,13 @@ export default (props) => {
                     />
                 })
             }
+            <antd.Result
+                status="info"
+                title="This is the end"
+                subTitle="There are no more comments"
+            />
+        </>
+    }
 
     return <div
         id="comments"
@@ -168,19 +177,13 @@ export default (props) => {
             }
         )}
     >
-        <div className="header">
-            <h3>
-                <Icons.MessageSquare /> Comments
-            </h3>
-        </div>
-
-        {renderComments()}
-
-        <div className="commentCreatorWrapper">
         <CommentCreator
             onSubmit={handleCommentSubmit}
             maxLength={PostModel.maxCommentLength}
         />
-        </div>
+
+        {
+            renderComments()
+        }
     </div>
 }

packages/app/src/components/CommentsCard/index.less

@@ -2,8 +2,19 @@
     display: flex;
     flex-direction: column;
 
+    max-height: 30vh;
+    width: 100%;
+
     padding: 10px;
+
+    overflow-y: overlay;
+
+    border-radius: 12px;
+
     color: var(--text-color);
+    background-color: var(--background-color-primary);
+
+    transition: all 150ms ease-in-out;
 
     h1,
     h2,
@@ -21,20 +32,13 @@
         padding: 0px;
     }
 
-    overflow: hidden;
+    gap: 10px;
-
-    width: 100%;
-    //height: 100%;
-
-    transition: all 150ms ease-in-out;
 
     .comment {
         position: relative;
         display: flex;
         flex-direction: column;
 
-        margin-bottom: 10px;
-
         background-color: var(--background-color-accent);
 
         padding: 10px;
@@ -72,6 +76,9 @@
             font-size: 14px;
             color: var(--text-color);
             margin-left: 20px;
+
+            word-break: break-all;
+            white-space: pre-wrap;
         }
 
         .deleteBtn {
@@ -87,17 +94,4 @@
             }
         }
     }
-
-    .commentCreatorWrapper {
-        position: sticky;
-        display: flex;
-
-        flex-direction: column;
-        align-items: center;
-
-        bottom: 0;
-        right: 0;
-
-        width: 100%;
-    }
 }