Improved vertical indentation alignment (#21718)

REF https://linear.app/ghost/issue/PLG-275/improve-vertical-indentation-alignment
TryGhost · Nov 25, 2024 · 5b70c7d · 5b70c7d
1 parent 5e42c31
commit 5b70c7d
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}