From 70bab29bf1e442cd6bc49894da491a622295eacf Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Wed, 1 Apr 2026 22:10:24 -0700
Subject: [PATCH] fix: prevent tool call results from overflowing chat viewport

Add min-w-0 to message content containers so flexbox children
respect the parent width and long content wraps properly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/features/chat/ui/MessageBubble.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/chat/ui/MessageBubble.tsx b/src/features/chat/ui/MessageBubble.tsx
index 44bbec5..825307a 100644
--- a/src/features/chat/ui/MessageBubble.tsx
+++ b/src/features/chat/ui/MessageBubble.tsx
@@ -430,7 +430,7 @@ export function MessageBubble({
       {/* Message content */}
       <div
         className={cn(
-          "flex flex-col gap-1",
+          "min-w-0 flex flex-col gap-1",
           isUser ? "max-w-[80%] items-end" : "max-w-[85%] items-start",
         )}
       >
@@ -440,7 +440,7 @@ export function MessageBubble({
           </span>
         )}
 
-        <div className="text-[13px] leading-relaxed">
+        <div className="w-full min-w-0 text-[13px] leading-relaxed">
           {groupContentSections(content).map((section, sectionIdx) => {
             if (section.type === "toolChain") {
               const toolItems = section.items as ToolChainItem[];