From a6ab279cf66fe4a8c90408f94faf23e6cfdb0eb7 Mon Sep 17 00:00:00 2001
From: Oleksii Dolhov <oleksii.dolhov@gmail.com>
Date: Mon, 27 Apr 2026 12:51:27 +0300
Subject: [PATCH] fix(chat): wrap long unbroken strings inside chat bubble
 (#457)

Long URLs, base64 blobs, and inline code in chat responses pushed
the agent detail page horizontally because text containers did not
break unbreakable strings and `<pre>` blocks grew to intrinsic width.

Add Tailwind classes on all three ChatBubble variants:
- `[overflow-wrap:anywhere]` on text containers (wraps long strings)
- `min-w-0` on bubble wrappers (so percent max-width clamps correctly)
- `prose-pre:max-w-full prose-pre:overflow-x-auto prose-pre:whitespace-pre`
  (pre blocks scroll inside the bubble instead of pushing layout)
- `prose-code:break-all prose-a:break-all`
  (inline code and links break at character boundaries)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/frontend/src/components/chat/ChatBubble.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/components/chat/ChatBubble.vue b/src/frontend/src/components/chat/ChatBubble.vue
index e9946ebd3..45758f3e3 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 min-w-0">
       <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 [overflow-wrap:anywhere]">{{ 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"
@@ -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 [overflow-wrap:anywhere] 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:before:content-none prose-code:after:content-none prose-code:break-all prose-a:break-all"
         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 min-w-0">
       <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 [overflow-wrap:anywhere] 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:before:content-none prose-code:after:content-none prose-code:break-all prose-a:break-all"
         v-html="renderedContent"
       ></div>
     </div>