chore: reduce comment form indentation

chimobi-justice · Dec 15, 2024 · 05a9f94 · 05a9f94
1 parent 69921ce
commit 05a9f94
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/pages/Articles/components/commentComponent.tsx b/src/pages/Articles/components/commentComponent.tsx
@@ -71,7 +71,7 @@ const CommentComponent: FunctionComponent<{ comment: IArticleComments, level: nu
 
   return (
     <Fragment>
-      <Box mb={"5px"} ml={`${level * 10}px`}> {/* Indent based on level */}
+      <Box mb={"5px"}> {/* Indent based on level */}
         <Box
           display={"flex"}
           justifyContent={"flex-start"}
@@ -203,15 +203,15 @@ const CommentComponent: FunctionComponent<{ comment: IArticleComments, level: nu
 
       {/* Render nested replies */}
       {comment.replies && comment.replies.length > 0 && (
-        <>
+        <Box ml={`${level * 10}px`}>
           {showAllReplies
             ? comment.replies.map(reply => (
               <CommentComponent key={reply.id} comment={reply} level={level + 1} />
             ))
             : comment.replies.slice(0, 1).map(reply => (
               <CommentComponent key={reply.id} comment={reply} level={level + 1} />
             ))}
-        </>
+        </Box>
       )}
 
       <ShowLoginModal isOpen={isOpen} onClose={onClose} />

diff --git a/src/pages/Threads/components/commentComponent.tsx b/src/pages/Threads/components/commentComponent.tsx
@@ -70,7 +70,7 @@ const CommentComponent: FunctionComponent<{ comment: IThreadComments, level: num
 
   return (
     <Fragment>
-      <Box mb={"5px"} ml={`${level * 20}px`}>
+      <Box mb={"5px"}>
         <Flex flex="1" gap={2} alignItems="flex-start" flexWrap="wrap">
           <Link to={`/user/${comment?.user?.username}`}>
             <Avatar size={"xs"} name={comment?.user?.fullname} src={comment?.user?.avatar} />
@@ -176,15 +176,15 @@ const CommentComponent: FunctionComponent<{ comment: IThreadComments, level: num
 
         {/* Render nested replies */}
         {comment.replies && comment.replies.length > 0 && (
-          <>
+          <Box ml={`${level * 20}px`}>
             {showAllReplies
               ? comment.replies.map(reply => (
                 <CommentComponent key={reply.id} comment={reply} level={level + 1} />
               ))
               : comment.replies.slice(0, 1).map(reply => (
                 <CommentComponent key={reply.id} comment={reply} level={level + 1} />
               ))}
-          </>
+          </Box>
         )}
       </Box>