improve style

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

@@ -150,13 +150,22 @@ export default (props) => {
             return <antd.Empty />
         }
 
-        return comments.map((comment) => {
+        return <>
-            return <CommentCard
+            {
-                data={comment}
+                comments.map((comment) => {
-                onClickDelete={handleCommentDelete}
+                    return <CommentCard
-                self={app.cores.permissions.checkUserIdIsSelf(comment.user._id)}
+                        data={comment}
+                        onClickDelete={handleCommentDelete}
+                        self={app.cores.permissions.checkUserIdIsSelf(comment.user._id)}
+                    />
+                })
+            }
+            <antd.Result
+                status="info"
+                title="This is the end"
+                subTitle="There are no more comments"
             />
-        })
+        </>
     }
 
     return <div
@@ -168,19 +177,13 @@ export default (props) => {
             }
         )}
     >
-        <div className="header">
+        <CommentCreator
-            <h3>
+            onSubmit={handleCommentSubmit}
-                <Icons.MessageSquare /> Comments
+            maxLength={PostModel.maxCommentLength}
-            </h3>
+        />
-        </div>
 
-        {renderComments()}
+        {
-
+            renderComments()
-        <div className="commentCreatorWrapper">
+        }
-            <CommentCreator
-                onSubmit={handleCommentSubmit}
-                maxLength={PostModel.maxCommentLength}
-            />
-        </div>
     </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%;
-    }
 }