From 76a82c27c59112d3fa65a03e28ee3570a272dedf Mon Sep 17 00:00:00 2001
From: weishu <twsxtd@gmail.com>
Date: Sun, 21 Dec 2025 09:16:25 +0800
Subject: [PATCH] fix(web): prevent text overflow in user message component by
 adding min-w-0 constraint

---
 web/src/components/AssistantChat/messages/UserMessage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/AssistantChat/messages/UserMessage.tsx b/web/src/components/AssistantChat/messages/UserMessage.tsx
index a38c1b9e..717981c6 100644
--- a/web/src/components/AssistantChat/messages/UserMessage.tsx
+++ b/web/src/components/AssistantChat/messages/UserMessage.tsx
@@ -36,7 +36,7 @@ export function HappyUserMessage() {
     const canRetry = status === 'failed' && typeof localId === 'string' && Boolean(ctx.onRetryMessage)
     const onRetry = canRetry ? () => ctx.onRetryMessage!(localId) : undefined
 
-    const userBubbleClass = 'w-fit max-w-[92%] ml-auto rounded-xl bg-[var(--app-secondary-bg)] px-3 py-2 text-[var(--app-fg)] shadow-sm'
+    const userBubbleClass = 'w-fit min-w-0 max-w-[92%] ml-auto rounded-xl bg-[var(--app-secondary-bg)] px-3 py-2 text-[var(--app-fg)] shadow-sm'
 
     if (isCliOutput) {
         return (
@@ -51,7 +51,7 @@ export function HappyUserMessage() {
     return (
         <MessagePrimitive.Root className={userBubbleClass}>
             <div className="flex items-end gap-2">
-                <div className="flex-1">
+                <div className="flex-1 min-w-0">
                     <LazyRainbowText text={text} />
                 </div>
                 {status ? (