From be43a5457067d15278f8bbd70aab186d2a7c7733 Mon Sep 17 00:00:00 2001
From: chengyongru <2755839590@qq.com>
Date: Sun, 26 Jul 2026 23:37:57 +0800
Subject: [PATCH] fix(webui): prevent mobile thread overflow

---
 .../src/components/thread/ThreadViewport.tsx  |  2 +-
 webui/src/tests/thread-viewport.test.tsx      | 22 +++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/webui/src/components/thread/ThreadViewport.tsx b/webui/src/components/thread/ThreadViewport.tsx
index b1bce06e..7f47c7df 100644
--- a/webui/src/components/thread/ThreadViewport.tsx
+++ b/webui/src/components/thread/ThreadViewport.tsx
@@ -638,7 +638,7 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
             <div
               ref={messageRegionRef}
               data-testid="thread-message-region"
-              className="row-start-1 flex min-h-0 flex-col justify-start px-3 pb-4 pt-4 sm:px-4"
+              className="row-start-1 flex min-h-0 min-w-0 flex-col justify-start px-3 pb-4 pt-4 sm:px-4"
             >
               <div ref={messageContentRef} className="mx-auto w-full max-w-[49.5rem]">
                 <ThreadMessages
diff --git a/webui/src/tests/thread-viewport.test.tsx b/webui/src/tests/thread-viewport.test.tsx
index 02a65a09..ab765013 100644
--- a/webui/src/tests/thread-viewport.test.tsx
+++ b/webui/src/tests/thread-viewport.test.tsx
@@ -223,6 +223,28 @@ describe("ThreadViewport", () => {
     expect(messageRegion.className).not.toContain("5rem");
   });
 
+  it("allows long messages to shrink within the shared mobile grid column", () => {
+    render(
+      <ThreadViewport
+        messages={[
+          ...messages,
+          {
+            id: "a-long-link",
+            role: "assistant",
+            content:
+              "https://github.com/HKUDS/nanobot/discussions/17788077"
+              + "/a-very-long-unbroken-segment-that-must-not-widen-the-thread",
+            createdAt: Date.now(),
+          },
+        ]}
+        isStreaming={false}
+        composer={<div>composer</div>}
+      />,
+    );
+
+    expect(screen.getByTestId("thread-message-region")).toHaveClass("min-w-0");
+  });
+
   it("top-aligns a short active turn while the agent is responding", () => {
     render(
       <ThreadViewport