From 5b70c7d1d7e68c5a21767849af3209e9f0dbf4b0 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <65487235+sanne-san@users.noreply.github.com>
Date: Mon, 25 Nov 2024 15:39:17 +0100
Subject: [PATCH] Improved vertical indentation alignment (#21718)

REF
https://linear.app/ghost/issue/PLG-275/improve-vertical-indentation-alignment
---
 apps/comments-ui/src/components/content/Comment.tsx         | 4 ++--
 apps/comments-ui/src/components/content/forms/EditForm.tsx  | 2 +-
 apps/comments-ui/src/components/content/forms/Form.tsx      | 6 +++---
 apps/comments-ui/src/components/content/forms/ReplyForm.tsx | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/comments-ui/src/components/content/Comment.tsx b/apps/comments-ui/src/components/content/Comment.tsx
index e5896dcd89a..8009183d7f9 100644
--- a/apps/comments-ui/src/components/content/Comment.tsx
+++ b/apps/comments-ui/src/components/content/Comment.tsx
@@ -244,7 +244,7 @@ const RepliesContainer: React.FC<RepliesProps & {className?: string}> = ({commen
     }
 
     return (
-        <div className={`mb-4 ml-[-1.4rem] mt-7 sm:mb-0 sm:mt-8 ${className}`}>
+        <div className={`-ml-2 mb-4 mt-7 sm:mb-0 sm:mt-8 ${className}`}>
             <Replies comment={comment} />
         </div>
     );
@@ -316,7 +316,7 @@ const CommentHeader: React.FC<CommentHeaderProps> = ({comment, className = ''})
             </div>
             {(isReplyToReply &&
                 <div className="mb-2 line-clamp-1 font-sans text-base leading-snug text-neutral-900/50 sm:text-sm dark:text-white/60">
-                    <span>{t('Replied to')}</span>:<a className="ml-0.5 font-semibold text-neutral-900/60 transition-colors hover:text-neutral-900/70 dark:text-white/70 dark:hover:text-white/80" data-testid="comment-in-reply-to" href={`#${comment.in_reply_to_id}`} onClick={scrollRepliedToCommentIntoView}>{comment.in_reply_to_snippet}</a>
+                    <span>{t('Replied to')}</span>:&nbsp;<a className="font-semibold text-neutral-900/60 transition-colors hover:text-neutral-900/70 dark:text-white/70 dark:hover:text-white/80" data-testid="comment-in-reply-to" href={`#${comment.in_reply_to_id}`} onClick={scrollRepliedToCommentIntoView}>{comment.in_reply_to_snippet}</a>
                 </div>
             )}
         </>
diff --git a/apps/comments-ui/src/components/content/forms/EditForm.tsx b/apps/comments-ui/src/components/content/forms/EditForm.tsx
index cbd00c4abc1..eba16be8995 100644
--- a/apps/comments-ui/src/components/content/forms/EditForm.tsx
+++ b/apps/comments-ui/src/components/content/forms/EditForm.tsx
@@ -60,7 +60,7 @@ const EditForm: React.FC<Props> = ({comment, openForm, parent}) => {
     }, [dispatchAction, openForm]);
 
     return (
-        <div className='px-3 pb-2 pt-3'>
+        <div className='px-2 pb-2 pt-3'>
             <div className='mt-[-16px] pr-3'>
                 <Form
                     close={close}
diff --git a/apps/comments-ui/src/components/content/forms/Form.tsx b/apps/comments-ui/src/components/content/forms/Form.tsx
index 3cb53e1f3e7..b81db273c89 100644
--- a/apps/comments-ui/src/components/content/forms/Form.tsx
+++ b/apps/comments-ui/src/components/content/forms/Form.tsx
@@ -227,8 +227,8 @@ const FormHeader: React.FC<FormHeaderProps> = ({show, name, expertise, replyingT
                 </div>
             </div>
             {isReplyingToReply && (
-                <div className="line-clamp-1 font-sans text-base leading-snug text-neutral-900/50 sm:text-sm dark:text-white/60" data-testid="replying-to">
-                    <span>{t('Reply to')}:</span>&nbsp;<span className="font-semibold">{replyingToText}</span>
+                <div className="mt-0.5 line-clamp-1 font-sans text-base leading-snug text-neutral-900/50 sm:text-sm dark:text-white/60" data-testid="replying-to">
+                    <span>{t('Reply to')}:</span>&nbsp;<span className="font-semibold text-neutral-900/60 dark:text-white/70">{replyingToText}</span>
                 </div>
             )}
         </Transition>
@@ -329,7 +329,7 @@ const Form: React.FC<FormProps> = ({comment, submit, submitText, submitSize, clo
     return (
         <form
             ref={formEl}
-            className={`-mx-3 mb-7 mt-[-10px] rounded-md transition duration-200 ${isOpen ? 'cursor-default' : 'cursor-pointer'}`}
+            className={`-mx-2 mb-7 mt-[-10px] rounded-md transition duration-200 ${isOpen ? 'cursor-default' : 'cursor-pointer'}`}
             data-testid="form"
             onClick={focusEditor}
             onMouseDown={preventIfFocused}
diff --git a/apps/comments-ui/src/components/content/forms/ReplyForm.tsx b/apps/comments-ui/src/components/content/forms/ReplyForm.tsx
index 1220d360998..0d52e9e08d5 100644
--- a/apps/comments-ui/src/components/content/forms/ReplyForm.tsx
+++ b/apps/comments-ui/src/components/content/forms/ReplyForm.tsx
@@ -46,7 +46,7 @@ const ReplyForm: React.FC<Props> = ({openForm, parent}) => {
 
     return (
         <div ref={setForm}>
-            <div className='mt-[-16px] pr-3'>
+            <div className='mt-[-16px] pr-2'>
                 <Form
                     close={close}
                     editor={editor}