From 3f5cdd807dccfa609a95754a12623001493c2386 Mon Sep 17 00:00:00 2001
From: Dayuan Jiang <34411969+DayuanJiang@users.noreply.github.com>
Date: Wed, 3 Dec 2025 13:45:14 +0900
Subject: [PATCH] fix: prevent tool args from expanding chat width during
 streaming (#47)

---
 components/chat-message-display.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/chat-message-display.tsx b/components/chat-message-display.tsx
index ad55dd2..c2d513d 100644
--- a/components/chat-message-display.tsx
+++ b/components/chat-message-display.tsx
@@ -131,9 +131,9 @@ export function ChatMessageDisplay({
         return (
             <div
                 key={callId}
-                className="p-4 my-2 text-gray-500 border border-gray-300 rounded"
+                className="p-4 my-2 text-gray-500 border border-gray-300 rounded overflow-hidden"
             >
-                <div className="flex flex-col gap-2">
+                <div className="flex flex-col gap-2 min-w-0">
                     <div className="flex items-center justify-between">
                         <div className="text-xs">Tool: {toolName}</div>
                         {input && Object.keys(input).length > 0 && (
@@ -146,11 +146,11 @@ export function ChatMessageDisplay({
                         )}
                     </div>
                     {input && isExpanded && (
-                        <div className="mt-1 font-mono text-xs overflow-hidden">
+                        <pre className="mt-1 font-mono text-xs overflow-x-auto whitespace-pre-wrap break-all max-h-48">
                             {typeof input === "object" &&
                                 Object.keys(input).length > 0 &&
                                 `Input: ${JSON.stringify(input, null, 2)}`}
-                        </div>
+                        </pre>
                     )}
                     <div className="mt-2 text-sm">
                         {state === "input-streaming" ? (