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>