From 3898239ec4c8d31d83e4af496c51e19702e57f59 Mon Sep 17 00:00:00 2001
From: Void <void@gamecult.org>
Date: Tue, 10 Nov 2026 20:33:44 +0000
Subject: [PATCH] Bound the reply preview: min-width 0 on its flex parents,
 2-line clamp, break long words and urls

On a 360px phone the reply quote above a message was unbounded and overflowed the screen.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 src/app/components/message/Reply.css.ts | 17 +++++++++++++++++
 src/app/components/message/Reply.tsx    | 11 +++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/app/components/message/Reply.css.ts b/src/app/components/message/Reply.css.ts
index 7e5540fd..d5254ecb 100644
--- a/src/app/components/message/Reply.css.ts
+++ b/src/app/components/message/Reply.css.ts
@@ -31,6 +31,7 @@ export const Reply = style({
 });
 
 export const ReplyContent = style({
+  minWidth: 0,
   opacity: config.opacity.P300,
 
   selectors: {
@@ -39,3 +40,19 @@ export const ReplyContent = style({
     },
   },
 });
+
+export const ReplyText = style({
+  display: '-webkit-box',
+  WebkitBoxOrient: 'vertical',
+  WebkitLineClamp: 2,
+  overflow: 'hidden',
+  minWidth: 0,
+  maxWidth: '100%',
+  overflowWrap: 'anywhere',
+  wordBreak: 'break-word',
+});
+
+export const ReplyWrap = style({
+  minWidth: 0,
+  maxWidth: '100%',
+});
diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index 57bf2af9..894b3b03 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -101,7 +101,14 @@ export const Reply = as<'div', ReplyProps>(
     const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;
 
     return (
-      <Box direction="Row" gap="200" alignItems="Center" {...props} ref={ref}>
+      <Box
+        className={css.ReplyWrap}
+        direction="Row"
+        gap="200"
+        alignItems="Center"
+        {...props}
+        ref={ref}
+      >
         {threadRootId && (
           <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
         )}
@@ -119,7 +126,7 @@ export const Reply = as<'div', ReplyProps>(
           onClick={onClick}
         >
           {replyEvent !== undefined ? (
-            <Text size="T300" truncate>
+            <Text size="T300" className={css.ReplyText}>
               {badEncryption ? <MessageBadEncryptedContent /> : bodyJSX}
             </Text>
           ) : (