From 6be6295a5d25c7edc140a1d3a35122333a4761e0 Mon Sep 17 00:00:00 2001
From: Andrii Pasternak <andriipasternak31@gmail.com>
Date: Sat, 25 Apr 2026 19:43:39 +0100
Subject: [PATCH] fix(chat): wrap long unbroken strings in chat bubbles (#457)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Long URLs, tokens, base64 blobs, and other unbroken strings in agent
chat responses were overflowing their 85% bubble and forcing horizontal
scroll on the entire Chat tab.

Root cause: ChatBubble.vue capped the bubble width but never told
inner content how to handle unbreakable strings. Inline <code> and
the user-text <p> had no overflow-wrap; <pre> defaulted to white-space:
pre with no overflow-x: auto override.

Fix (CSS-only, all 3 render branches — user / self-task / assistant):
- min-w-0 on outer wrapper, overflow-hidden on inner bubble
- break-words on user text and prose container
- prose-pre:overflow-x-auto + prose-pre:max-w-full so code blocks
  scroll inside the bubble instead of expanding it
- prose-code:break-words for long inline tokens
- prose-a:break-words for long URLs in markdown links

Verified visually: before/after static test page shows BEFORE leaks
content well past the bubble border; AFTER wraps cleanly with no
regression on normal markdown (headings, lists, links, short code).
---
 .../src/components/chat/ChatBubble.vue         | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/components/chat/ChatBubble.vue b/src/frontend/src/components/chat/ChatBubble.vue
index e9946ebd3..43979fa1a 100644
--- a/src/frontend/src/components/chat/ChatBubble.vue
+++ b/src/frontend/src/components/chat/ChatBubble.vue
@@ -2,21 +2,21 @@
   <!-- User message (plain text) -->
   <div
     v-if="role === 'user'"
-    class="max-w-[85%] ml-auto"
+    class="max-w-[85%] min-w-0 ml-auto"
   >
-    <div class="rounded-xl px-4 py-3 bg-indigo-600 text-white">
+    <div class="rounded-xl px-4 py-3 bg-indigo-600 text-white overflow-hidden">
       <div v-if="source === 'voice'" class="flex items-center gap-1.5 mb-1 opacity-75">
         <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4M12 15a3 3 0 003-3V5a3 3 0 00-6 0v7a3 3 0 003 3z" /></svg>
         <span class="text-[10px] uppercase tracking-wide">Voice</span>
       </div>
-      <p class="whitespace-pre-wrap">{{ content }}</p>
+      <p class="whitespace-pre-wrap break-words">{{ content }}</p>
     </div>
     <p v-if="formattedTime" class="text-xs text-gray-400 dark:text-gray-500 mt-1 text-right">{{ formattedTime }}</p>
   </div>
   <!-- Self-task result message (SELF-EXEC-001) - collapsible by default -->
   <div
     v-else-if="source === 'self_task'"
-    class="max-w-[85%] group relative"
+    class="max-w-[85%] min-w-0 group relative"
   >
     <button
       type="button"
@@ -28,7 +28,7 @@
       <svg v-if="!copied" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
       <svg v-else class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
     </button>
-    <div class="rounded-xl px-4 py-3 bg-purple-50 dark:bg-purple-900/20 text-gray-900 dark:text-white shadow-sm border border-purple-200 dark:border-purple-800">
+    <div class="rounded-xl px-4 py-3 bg-purple-50 dark:bg-purple-900/20 text-gray-900 dark:text-white shadow-sm border border-purple-200 dark:border-purple-800 overflow-hidden">
       <!-- Self-task header with collapse toggle -->
       <div
         class="flex items-center gap-2 mb-2 text-purple-600 dark:text-purple-400 cursor-pointer"
@@ -55,7 +55,7 @@
       <!-- Expanded content -->
       <div
         v-else
-        class="prose prose-sm dark:prose-invert max-w-none prose-p:my-2 prose-headings:my-3 prose-ul:my-2 prose-ol:my-2 prose-li:my-0 prose-pre:my-2 prose-code:text-indigo-600 dark:prose-code:text-indigo-400 prose-code:bg-gray-100 dark:prose-code:bg-gray-700 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none"
+        class="prose prose-sm dark:prose-invert max-w-none break-words prose-p:my-2 prose-headings:my-3 prose-ul:my-2 prose-ol:my-2 prose-li:my-0 prose-pre:my-2 prose-pre:max-w-full prose-pre:overflow-x-auto prose-pre:whitespace-pre prose-code:text-indigo-600 dark:prose-code:text-indigo-400 prose-code:bg-gray-100 dark:prose-code:bg-gray-700 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:break-words prose-code:before:content-none prose-code:after:content-none prose-a:break-words"
         v-html="renderedContent"
       ></div>
     </div>
@@ -64,7 +64,7 @@
   <!-- Assistant message (markdown rendered) -->
   <div
     v-else
-    class="max-w-[85%] group relative"
+    class="max-w-[85%] min-w-0 group relative"
   >
     <button
       type="button"
@@ -76,13 +76,13 @@
       <svg v-if="!copied" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
       <svg v-else class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
     </button>
-    <div class="rounded-xl px-4 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-sm">
+    <div class="rounded-xl px-4 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-sm overflow-hidden">
       <div v-if="source === 'voice'" class="flex items-center gap-1.5 mb-1 text-gray-400 dark:text-gray-500">
         <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072M18.364 5.636a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /></svg>
         <span class="text-[10px] uppercase tracking-wide">Voice</span>
       </div>
       <div
-        class="prose prose-sm dark:prose-invert max-w-none prose-p:my-2 prose-headings:my-3 prose-ul:my-2 prose-ol:my-2 prose-li:my-0 prose-pre:my-2 prose-code:text-indigo-600 dark:prose-code:text-indigo-400 prose-code:bg-gray-100 dark:prose-code:bg-gray-700 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none"
+        class="prose prose-sm dark:prose-invert max-w-none break-words prose-p:my-2 prose-headings:my-3 prose-ul:my-2 prose-ol:my-2 prose-li:my-0 prose-pre:my-2 prose-pre:max-w-full prose-pre:overflow-x-auto prose-pre:whitespace-pre prose-code:text-indigo-600 dark:prose-code:text-indigo-400 prose-code:bg-gray-100 dark:prose-code:bg-gray-700 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:break-words prose-code:before:content-none prose-code:after:content-none prose-a:break-words"
         v-html="renderedContent"
       ></div>
     </div>