diff --git a/src/components/CircleComment/Feed/index.tsx b/src/components/CircleComment/Feed/index.tsx index dd12008a4e..4885cf0a2f 100644 --- a/src/components/CircleComment/Feed/index.tsx +++ b/src/components/CircleComment/Feed/index.tsx @@ -51,6 +51,11 @@ const BaseCommentFeed = ({ const { id, replyTo, author, parentComment } = comment const nodeId = parentComment ? `${parentComment.id}-${id}` : id + // the content indent (.contentContainer) is sized for the default 32px + // avatar; campaign-discussion replies use a 24px avatar, so tighten the + // indent to keep the text aligned under the author name + const isCompactIndent = type === 'campaignDiscussion' && avatarSize <= 24 + const submitCallback = () => { if (replySubmitCallback) { replySubmitCallback() @@ -74,6 +79,9 @@ const BaseCommentFeed = ({ hasAvatar hasDisplayName hasUserName={hasUserName} + // keep name + @id on one line; in the narrow (indented) reply column + // they otherwise wrap to two lines and the gap looks cramped + nameNoWrap={type === 'campaignDiscussion'} />
@@ -87,12 +95,16 @@ const BaseCommentFeed = ({ {replyTo && (!parentComment || replyTo.id !== parentComment.id) && ( -
+
)} -
+
= ({ > } > diff --git a/src/components/Forms/CircleCommentForm/styles.module.css b/src/components/Forms/CircleCommentForm/styles.module.css index fbaf5836a1..56c6db7235 100644 --- a/src/components/Forms/CircleCommentForm/styles.module.css +++ b/src/components/Forms/CircleCommentForm/styles.module.css @@ -19,7 +19,15 @@ /* campaign-discussion variant: the footer (counter + submit) sits inside the editor box, bottom-right */ .contentBoxed { - margin-bottom: 0; + /* keep a gap below the box so the first comment / list isn't glued to it */ + margin-bottom: var(--sp16); +} + +/* compact the editor inside the campaign-discussion box (the shared editor's + default min-height is tall once the footer also sits inside the box). + `u-content-comment` is a global class, so this only touches this variant. */ +.contentBoxed :global(.u-content-comment) { + min-height: 3rem; } .inlineFooter { @@ -36,5 +44,7 @@ } .counter[data-over='true'] { - color: var(--color-red); + /* site-wide form-error red (ArticleCommentForm / Form.Field use the same); + the previous --color-red is undefined, so the counter never turned red */ + color: var(--color-negative-red); }