mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
Improved vertical indentation alignment (#21718)
REF https://linear.app/ghost/issue/PLG-275/improve-vertical-indentation-alignment
This commit is contained in:
parent
5e42c3146d
commit
5b70c7d1d7
4 changed files with 7 additions and 7 deletions
|
@ -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>: <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>
|
||||
)}
|
||||
</>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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> <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> <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}
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Add table
Reference in a new issue