From 869680fe652ab4308ad28f6570fb8a845c63bbd2 Mon Sep 17 00:00:00 2001
From: Jiang Bohan <bhjiang@outlook.com>
Date: Thu, 22 Jan 2026 16:00:43 +0800
Subject: [PATCH] fix: text overflow in chat bubbles - content not wrapping
 correctly

Add CSS properties to ensure text properly wraps within chat bubble boundaries:
- Add break-words and overflow-hidden to user message bubbles
- Add break-words, overflow-hidden, and [&_*]:break-words to TextContentBlock
  for proper word breaking in nested markdown elements

Closes #83

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/renderer/src/components/ChatView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/ChatView.tsx b/src/renderer/src/components/ChatView.tsx
index 2e3122c2e3..2ed5a97766 100644
--- a/src/renderer/src/components/ChatView.tsx
+++ b/src/renderer/src/components/ChatView.tsx
@@ -669,7 +669,7 @@ function MessageBubble({
 
     return (
       <div className="flex justify-end">
-        <div className="max-w-[85%] rounded-lg bg-[#f9f7f5] dark:bg-muted px-4 py-3 text-[15px]">
+        <div className="max-w-[85%] rounded-lg bg-[#f9f7f5] dark:bg-muted px-4 py-3 text-[15px] break-words overflow-hidden">
           {/* Render images first */}
           {imageBlocks.length > 0 && (
             <div className="flex flex-wrap gap-2 mb-2">
@@ -895,7 +895,7 @@ function TextContentBlock({ content }: { content: string }): React.JSX.Element |
   if (!content) return null
 
   return (
-    <div className="prose prose-invert max-w-none text-[15px] leading-[1.7]">
+    <div className="prose prose-invert max-w-none text-[15px] leading-[1.7] break-words overflow-hidden [&_*]:break-words">
       <ReactMarkdown remarkPlugins={[remarkGfm]} components={TEXT_MARKDOWN_COMPONENTS}>
         {content}
       </ReactMarkdown>