From 1a85d2f8de71990900ced4913881c35f6606be69 Mon Sep 17 00:00:00 2001
From: Neel Harsola <81899840+skylarkoo7@users.noreply.github.com>
Date: Thu, 5 Feb 2026 13:28:55 +0530
Subject: [PATCH] Fix: prevent streaming message width collapse (#12999)

## Summary
- keep assistant message containers stretched to available width
- avoid width collapse during streaming by allowing flex items to shrink

## Test plan
- not run (not requested)

Fixes #12985

Made with [Cursor](https://cursor.com)

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Liu An <asiro@qq.com>
---
 web/src/components/message-item/index.module.less      | 2 ++
 web/src/components/message-item/index.tsx              | 2 +-
 web/src/components/next-message-item/index.module.less | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/src/components/message-item/index.module.less b/web/src/components/message-item/index.module.less
index 01a2f544e..d870c1744 100644
--- a/web/src/components/message-item/index.module.less
+++ b/web/src/components/message-item/index.module.less
@@ -9,6 +9,8 @@
   .messageItemContent {
     display: inline-flex;
     gap: 20px;
+    width: 100%;
+    min-width: 0;
   }
   .messageItemContentReverse {
     flex-direction: row-reverse;
diff --git a/web/src/components/message-item/index.tsx b/web/src/components/message-item/index.tsx
index 066420e41..ab675fc8b 100644
--- a/web/src/components/message-item/index.tsx
+++ b/web/src/components/message-item/index.tsx
@@ -124,7 +124,7 @@ const MessageItem = ({
               ></SvgIcon>
             ))}
 
-          <section className="flex gap-2 flex-1 flex-col">
+          <section className="flex min-w-0 gap-2 flex-1 flex-col">
             {isAssistant ? (
               index !== 0 && (
                 <AssistantGroupButton
diff --git a/web/src/components/next-message-item/index.module.less b/web/src/components/next-message-item/index.module.less
index 17cb36165..1ba3f8481 100644
--- a/web/src/components/next-message-item/index.module.less
+++ b/web/src/components/next-message-item/index.module.less
@@ -10,6 +10,7 @@
     display: inline-flex;
     gap: 20px;
     width: 100%;
+    min-width: 0;
   }
   .messageItemContentReverse {
     flex-direction: row-reverse;