Status redesign: Fix reply display bugs (#40584)

app/javascript/mastodon/components/status/prepend.module.scss

@@ -5,7 +5,6 @@
 
   display: grid;
   grid-template-columns: subgrid;
-  grid-template-rows: 1fr;
   align-items: center;
   color: var(--color-text-secondary);
   grid-column: span 2;
@@ -54,9 +53,13 @@ a.account {
   color: var(--color-text-primary);
 }
 
-.text {
-  @include mixins.line-clamp(1);
-
-  display: block;
+.text blockquote {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
   margin-block-start: var(--space-1);
+
+  > p {
+    display: inline;
+  }
 }

app/javascript/mastodon/components/status/prepend.tsx

@@ -101,6 +101,9 @@ const StatusPrependReply: React.FC<{ replyId: string }> = ({ replyId }) => {
   };
 
   const language = status.translation?.language ?? status.language;
+  const content = (
+    status.translation?.contentHtml ?? status.contentHtml
+  ).trim();
 
   return (
     <div className={classes.root}>
@@ -120,15 +123,17 @@ const StatusPrependReply: React.FC<{ replyId: string }> = ({ replyId }) => {
           </Link>
         </span>
 
-        <Link to={statusLink(status)} className={classes.text}>
-          <EmojiHTML
-            as='blockquote'
-            lang={language}
-            htmlString={status.translation?.contentHtml ?? status.contentHtml}
-            extraEmojis={status.emojis}
-            onElement={onStatusLinksDisabled}
-          />
-        </Link>
+        {!!content && (
+          <Link to={statusLink(status)} className={classes.text}>
+            <EmojiHTML
+              as='blockquote'
+              lang={language}
+              htmlString={content}
+              extraEmojis={status.emojis}
+              onElement={onStatusLinksDisabled}
+            />
+          </Link>
+        )}
       </div>
     </div>
   );

app/javascript/mastodon/components/status/styles.module.scss

@@ -3,11 +3,14 @@
 .root {
   --col-gap: var(--space-2);
   --avatar-size: 40px;
+  --first-col-width: calc(var(--avatar-size) + var(--col-gap));
   --content-col: 2;
 
   display: grid;
-  grid-template-columns: calc(var(--avatar-size) + var(--col-gap)) auto;
-  grid-template-rows: minmax(calc(var(--avatar-size) + var(--col-gap)), auto);
+  grid-template-columns: var(--first-col-width) minmax(
+      calc(100% - var(--first-col-width)),
+      1fr
+    );
   grid-auto-rows: auto;
   row-gap: var(--space-2);
   padding: var(--space-4);