From 28e97c88ddc5624c219eb78529ffaa32eff1df0c Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Wed, 31 Jan 2024 20:23:00 +0700
Subject: [PATCH] style: fix overflow of comment in mobile

---
 src/components/comments/ViewComment.tsx | 38 +++++++++++++------------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/comments/ViewComment.tsx b/src/components/comments/ViewComment.tsx
index c93a80c3d..df38131c8 100644
--- a/src/components/comments/ViewComment.tsx
+++ b/src/components/comments/ViewComment.tsx
@@ -164,24 +164,26 @@ export const InnerViewComment: FC<Props> = props => {
               <CommentBody comment={asCommentData(comment)} />
             )}
           </div>
-          <div className='d-flex align-items-center GapSmall mt-1.5'>
-            <SuperLike
-              isComment
-              key={`voters-of-comments-${id}`}
-              className='!FontTiny'
-              iconClassName='!FontSmall'
-              post={commentStruct}
-            />
-            <Button
-              key={`reply-comment-${id}`}
-              className='p-0'
-              style={{ border: 'none', boxShadow: 'none', background: 'transparent' }}
-              onClick={() => setShowReplyForm(true)}
-            >
-              <span className='d-flex align-items-center ColorMuted'>
-                <IconWithLabel icon={<TbMessageCircle2 className='FontNormal' />} label='Reply' />
-              </span>
-            </Button>
+          <div className='d-flex align-items-center mt-1.5' style={{ flexWrap: 'wrap-reverse' }}>
+            <div className='d-flex align-items-center GapSmall mr-2'>
+              <SuperLike
+                isComment
+                key={`voters-of-comments-${id}`}
+                className='!FontTiny'
+                iconClassName='!FontSmall'
+                post={commentStruct}
+              />
+              <Button
+                key={`reply-comment-${id}`}
+                className='p-0'
+                style={{ border: 'none', boxShadow: 'none', background: 'transparent' }}
+                onClick={() => setShowReplyForm(true)}
+              >
+                <span className='d-flex align-items-center ColorMuted'>
+                  <IconWithLabel icon={<TbMessageCircle2 className='FontNormal' />} label='Reply' />
+                </span>
+              </Button>
+            </div>
             <PostRewardStat postId={comment.id} style={{ marginLeft: 'auto' }} />
           </div>
           <div className='mt-1.5 d-flex flex-column'>