From d5c1995641acb5e89ecaa79d4510ba2290e3b914 Mon Sep 17 00:00:00 2001
From: RuoJi6 <79234113+RuoJi6@users.noreply.github.com>
Date: Wed, 16 Sep 2026 22:37:11 +0800
Subject: [PATCH] fix(chat): constrain long message bubbles to the conversation
 pane (#137)

---
 web/src/components/transcript.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/components/transcript.tsx b/web/src/components/transcript.tsx
index a2be20d..1d9b4a0 100644
--- a/web/src/components/transcript.tsx
+++ b/web/src/components/transcript.tsx
@@ -602,14 +602,14 @@ function UserRow({ step, intent, getDetail }: { step: Activity; intent?: boolean
   }, [inView, step.seq, getDetail, step.summary, inline]);
   const { text, attachments } = parseUserBody(full ?? step.summary);
   return (
-    <div ref={ref} className="mt-3 mb-2 flex justify-end gap-2">
-      <div className="flex max-w-[85%] flex-col items-end gap-1.5">
+    <div ref={ref} className="mt-3 mb-2 flex min-w-0 justify-end gap-2">
+      <div className="flex min-w-0 max-w-[85%] flex-col items-end gap-1.5">
         {attachments.length > 0 && (
-          <div className="flex flex-wrap justify-end gap-1.5">
+          <div className="flex min-w-0 max-w-full flex-wrap justify-end gap-1.5">
             {attachments.map((a) => (
               <div
                 key={a.path}
-                className="flex items-center gap-1.5 rounded-md border bg-card px-2 py-1 text-xs shadow-sm"
+                className="flex min-w-0 max-w-full items-center gap-1.5 rounded-md border bg-card px-2 py-1 text-xs shadow-sm"
                 title={a.path}
               >
                 <PaperclipIcon className="size-3 shrink-0 text-primary" />
@@ -620,7 +620,7 @@ function UserRow({ step, intent, getDetail }: { step: Activity; intent?: boolean
           </div>
         )}
         {text && (
-          <div className="whitespace-pre-wrap break-words rounded-lg rounded-tr-sm bg-primary px-3 py-1.5 text-sm text-primary-foreground">
+          <div className="min-w-0 max-w-full whitespace-pre-wrap rounded-lg rounded-tr-sm bg-primary px-3 py-1.5 text-sm text-primary-foreground [overflow-wrap:anywhere]">
             {text}
           </div>
         )}