From 0367fe6c7a172d8f83a2da4bb1c61903096e196d Mon Sep 17 00:00:00 2001
From: snaplap <87688412+snaplap@users.noreply.github.com>
Date: Thu, 11 Jun 2026 22:55:48 +0800
Subject: [PATCH] fix(frontend): prevent user message bubble overflow with long
 unbreakable strings (#3488)

- Add max-w-full min-w-0 to user message wrapper div to constrain width
- Change bubble width from w-fit to w-full max-w-full for consistent layout
- Add break-words to user message content for long string wrapping
- Add overflow-x-clip as defensive overflow protection

Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
---
 .../workspace/messages/message-list-item.tsx           | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/workspace/messages/message-list-item.tsx b/frontend/src/components/workspace/messages/message-list-item.tsx
index 1ef3d2d1e..458759255 100644
--- a/frontend/src/components/workspace/messages/message-list-item.tsx
+++ b/frontend/src/components/workspace/messages/message-list-item.tsx
@@ -302,6 +302,7 @@ function MessageContent_({
   if (isHuman) {
     const messageResponse = contentToDisplay ? (
       <AIElementMessageResponse
+        className="break-words"
         remarkPlugins={humanMessagePlugins.remarkPlugins}
         rehypePlugins={humanMessagePlugins.rehypePlugins}
         components={components}
@@ -311,10 +312,15 @@ function MessageContent_({
       </AIElementMessageResponse>
     ) : null;
     return (
-      <div className={cn("ml-auto flex flex-col gap-2", className)}>
+      <div
+        className={cn(
+          "ml-auto flex max-w-full min-w-0 flex-col gap-2",
+          className,
+        )}
+      >
         {filesList}
         {messageResponse && (
-          <AIElementMessageContent className="w-fit">
+          <AIElementMessageContent className="w-full max-w-full">
             {messageResponse}
           </AIElementMessageContent>
         )}