fix(campaign): logged-in discussion polish (spacing, alignment, centering)

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'}
         />
 
         <section className={styles.right}>
@@ -87,12 +95,16 @@ const BaseCommentFeed = ({
       </header>
 
       {replyTo && (!parentComment || replyTo.id !== parentComment.id) && (
-        <section className={styles.replyToContainer}>
+        <section
+          className={`${styles.replyToContainer} ${isCompactIndent ? styles.replyToContainerSm : ''}`}
+        >
           <ReplyTo user={replyTo.author} />
         </section>
       )}
 
-      <section className={styles.contentContainer}>
+      <section
+        className={`${styles.contentContainer} ${isCompactIndent ? styles.contentContainerSm : ''}`}
+      >
         <Media lessThan="md">
           <CircleCommentContent
             comment={comment}

src/components/CircleComment/Feed/styles.module.css

@@ -25,6 +25,16 @@
   margin-top: var(--sp4);
 }
 
+/* compact indent for 24px-avatar replies (campaign discussion), so the text
+   lines up under the author name instead of sitting half a step further in */
+.replyToContainerSm {
+  margin-left: var(--sp24);
+}
+
+.contentContainerSm {
+  padding-left: var(--sp32);
+}
+
 @keyframes comment-background-fade-out {
   50% {
     background: var(--color-grey-lighter);

src/components/Forms/CircleCommentForm/index.tsx

@@ -173,7 +173,9 @@ export const CircleCommentForm: React.FC<CircleCommentFormProps> = ({
       >
         <TextIcon
           color="white"
-          size={15}
+          // match the site's comment submit buttons (ArticleCommentForm = 14);
+          // scoped so circle broadcast/discussion keep their current size
+          size={type === 'campaignDiscussion' ? 14 : 15}
           weight="medium"
           icon={isSubmitting && <Spinner size={14} />}
         >

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);
 }