From c087165e9079addce9405dd9312e2c6ef303eb0a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 10 Jan 2026 21:29:32 +0000
Subject: [PATCH 1/3] fix(sidebar): remove overflow-hidden that clips text in
 sidebar messages

Replace overflow-hidden with break-words on text containers to allow
proper word wrapping instead of clipping content. The CSS module already
had proper word-breaking rules but the parent overflow-hidden was
preventing them from working.
---
 .../ai/shared/chat/CompactMessageRenderer.tsx        |  6 +++---
 .../components/ai/shared/chat/MessageRenderer.tsx    |  2 +-
 .../chat/tool-calls/CompactToolCallRenderer.tsx      | 12 ++++++------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx b/apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx
index 908e6b93d6..b0c8a92859 100644
--- a/apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx
+++ b/apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx
@@ -55,7 +55,7 @@ const CompactTextBlock: React.FC<CompactTextBlockProps> = React.memo(({
 
   return (
     <div
-      className={`group relative text-xs mb-1 min-w-0 max-w-full overflow-hidden ${role === 'user'
+      className={`group relative text-xs mb-1 min-w-0 max-w-full ${role === 'user'
           ? 'p-2 rounded-md bg-primary/10 dark:bg-accent/20 ml-2'
           : ''
         }`}
@@ -79,7 +79,7 @@ const CompactTextBlock: React.FC<CompactTextBlockProps> = React.memo(({
         </div>
       ) : (
         <>
-          <div className={`text-gray-900 dark:text-gray-100 prose prose-xs dark:prose-invert min-w-0 max-w-full overflow-hidden ${styles.compactProseContent}`}>
+          <div className={`text-gray-900 dark:text-gray-100 prose prose-xs dark:prose-invert min-w-0 max-w-full break-words ${styles.compactProseContent}`}>
             <StreamingMarkdown content={content} id={`${messageId}-text`} isStreaming={isStreaming} />
           </div>
           {/* Always show footer with buttons; timestamp only when createdAt exists */}
@@ -338,7 +338,7 @@ export const CompactMessageRenderer: React.FC<CompactMessageRendererProps> = Rea
 
   return (
     <>
-      <div key={message.id} className="mb-1 min-w-0 max-w-full overflow-hidden" style={{ contentVisibility: 'auto', containIntrinsicSize: 'auto 80px' }}>
+      <div key={message.id} className="mb-1 min-w-0 max-w-full" style={{ contentVisibility: 'auto', containIntrinsicSize: 'auto 80px' }}>
         {groupedParts.map((group, index) => {
           if (isTextGroupPart(group)) {
             const isLastTextBlock = index === groupedParts.length - 1;
diff --git a/apps/web/src/components/ai/shared/chat/MessageRenderer.tsx b/apps/web/src/components/ai/shared/chat/MessageRenderer.tsx
index 0d641a514e..dca6858a5d 100644
--- a/apps/web/src/components/ai/shared/chat/MessageRenderer.tsx
+++ b/apps/web/src/components/ai/shared/chat/MessageRenderer.tsx
@@ -75,7 +75,7 @@ const TextBlock: React.FC<TextBlockProps> = React.memo(({
         />
       ) : (
         <>
-          <div className="text-gray-900 dark:text-gray-100 prose prose-sm dark:prose-invert max-w-full overflow-hidden prose-pre:bg-gray-100 dark:prose-pre:bg-gray-800">
+          <div className="text-gray-900 dark:text-gray-100 prose prose-sm dark:prose-invert max-w-full prose-pre:bg-gray-100 dark:prose-pre:bg-gray-800">
             <div className="break-words overflow-wrap-anywhere">
               <StreamingMarkdown content={content} id={`${messageId}-text`} isStreaming={isStreaming} />
             </div>
diff --git a/apps/web/src/components/ai/shared/chat/tool-calls/CompactToolCallRenderer.tsx b/apps/web/src/components/ai/shared/chat/tool-calls/CompactToolCallRenderer.tsx
index aabe139cd3..7b0bfa5582 100644
--- a/apps/web/src/components/ai/shared/chat/tool-calls/CompactToolCallRenderer.tsx
+++ b/apps/web/src/components/ai/shared/chat/tool-calls/CompactToolCallRenderer.tsx
@@ -247,9 +247,9 @@ export const CompactToolCallRenderer: React.FC<CompactToolCallRendererProps> = (
     if (!isExpanded) return null;
 
     return (
-      <div className="mt-1 p-1.5 bg-gray-50 dark:bg-gray-800/50 rounded text-[10px] space-y-1 max-w-full overflow-hidden">
+      <div className="mt-1 p-1.5 bg-gray-50 dark:bg-gray-800/50 rounded text-[10px] space-y-1 max-w-full break-words">
         {input ? (
-          <div className="space-y-0.5 max-w-full overflow-hidden">
+          <div className="space-y-0.5 max-w-full break-words">
             <div className="font-medium text-gray-600 dark:text-gray-400">Input:</div>
             <pre className="text-gray-500 dark:text-gray-500 overflow-x-auto whitespace-pre-wrap break-all max-w-full">
               {JSON.stringify(typeof input === 'string' ? JSON.parse(input) : input, null, 2)}
@@ -258,7 +258,7 @@ export const CompactToolCallRenderer: React.FC<CompactToolCallRendererProps> = (
         ) : null}
 
         {output ? (
-          <div className="space-y-0.5 max-w-full overflow-hidden">
+          <div className="space-y-0.5 max-w-full break-words">
             <div className="font-medium text-gray-600 dark:text-gray-400">Result:</div>
             {(() => {
               try {
@@ -311,7 +311,7 @@ export const CompactToolCallRenderer: React.FC<CompactToolCallRendererProps> = (
         ) : null}
 
         {error ? (
-          <div className="p-1 bg-red-50 dark:bg-red-900/20 rounded max-w-full overflow-hidden">
+          <div className="p-1 bg-red-50 dark:bg-red-900/20 rounded max-w-full break-words">
             <div className="text-red-600 dark:text-red-400 break-words">{error}</div>
           </div>
         ) : null}
@@ -320,10 +320,10 @@ export const CompactToolCallRenderer: React.FC<CompactToolCallRendererProps> = (
   };
 
   return (
-    <div className="py-0.5 text-[11px] max-w-full overflow-hidden">
+    <div className="py-0.5 text-[11px] max-w-full">
       <button
         onClick={() => setIsExpanded(!isExpanded)}
-        className="w-full flex items-center space-x-1.5 text-left hover:bg-muted/30 rounded py-0.5 px-1 transition-colors max-w-full overflow-hidden"
+        className="w-full flex items-center space-x-1.5 text-left hover:bg-muted/30 rounded py-0.5 px-1 transition-colors max-w-full"
       >
         {isExpanded ? <ChevronDown className="h-3 w-3 flex-shrink-0" /> : <ChevronRight className="h-3 w-3 flex-shrink-0" />}
         <div className="flex-shrink-0">{getToolIcon(toolName)}</div>

From 82f00cdb4f93acdb3d6e96f7e9ea2ee1c33f0ed7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 10 Jan 2026 21:50:42 +0000
Subject: [PATCH 2/3] fix(sidebar): remove overflow-hidden from TaskRenderer
 component

The TaskRenderer component for task management tool calls was also
using overflow-hidden which clips text. Replace with break-words for
proper text wrapping.
---
 .../components/ai/shared/chat/tool-calls/TaskRenderer.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/ai/shared/chat/tool-calls/TaskRenderer.tsx b/apps/web/src/components/ai/shared/chat/tool-calls/TaskRenderer.tsx
index 8175923ad3..6e880cf7bf 100644
--- a/apps/web/src/components/ai/shared/chat/tool-calls/TaskRenderer.tsx
+++ b/apps/web/src/components/ai/shared/chat/tool-calls/TaskRenderer.tsx
@@ -168,10 +168,10 @@ export const TaskRenderer: React.FC<TaskRendererProps> = ({ part }) => {
   const isLoading = state === 'input-streaming' || state === 'streaming' || state === 'input-available';
 
   return (
-    <div className="py-0.5 text-[11px] max-w-full overflow-hidden">
+    <div className="py-0.5 text-[11px] max-w-full">
       <button
         onClick={() => !isLoading && setIsOpen(!isOpen)}
-        className="w-full flex items-center space-x-1.5 text-left hover:bg-muted/30 rounded py-0.5 px-1 transition-colors max-w-full overflow-hidden"
+        className="w-full flex items-center space-x-1.5 text-left hover:bg-muted/30 rounded py-0.5 px-1 transition-colors max-w-full"
         disabled={isLoading}
         aria-expanded={isOpen}
         aria-label="Task management details"
@@ -190,7 +190,7 @@ export const TaskRenderer: React.FC<TaskRendererProps> = ({ part }) => {
       </button>
 
       {isOpen && !isLoading && (
-        <div className="mt-1 p-1.5 bg-gray-50 dark:bg-gray-800/50 rounded text-[10px] space-y-1 max-w-full overflow-hidden">
+        <div className="mt-1 p-1.5 bg-gray-50 dark:bg-gray-800/50 rounded text-[10px] space-y-1 max-w-full break-words">
           {/* Error state */}
           {(state === 'output-error' || !parsedOutput?.success) && (
             <div className="text-red-600 dark:text-red-400">

From ffa9d80ae87af26f6104869ce689b03389d06dc8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 10 Jan 2026 21:52:13 +0000
Subject: [PATCH 3/3] fix(sidebar): constrain scroll content width to prevent
 horizontal overflow

Add overflow-x-hidden wrapper around sidebar messages to prevent the
Radix ScrollArea's internal display:table from expanding content beyond
the viewport width. This ensures text wraps properly within the sidebar.
---
 .../layout/right-sidebar/ai-assistant/SidebarChatTab.tsx    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/layout/right-sidebar/ai-assistant/SidebarChatTab.tsx b/apps/web/src/components/layout/right-sidebar/ai-assistant/SidebarChatTab.tsx
index e6458d5ed9..205a803c07 100644
--- a/apps/web/src/components/layout/right-sidebar/ai-assistant/SidebarChatTab.tsx
+++ b/apps/web/src/components/layout/right-sidebar/ai-assistant/SidebarChatTab.tsx
@@ -601,8 +601,9 @@ const SidebarChatTab: React.FC = () => {
 
       {/* Messages */}
       <div className="flex-1 min-h-0 min-w-0 overflow-hidden" style={{ contain: 'layout' }}>
-        <ScrollArea className="h-full p-3" ref={scrollAreaRef}>
-          <div className="space-y-1.5 min-w-0">
+        <ScrollArea className="h-full" ref={scrollAreaRef}>
+          <div className="p-3 min-w-0 overflow-x-hidden">
+            <div className="space-y-1.5 min-w-0 max-w-full break-words">
             {displayMessages.length === 0 ? (
               <div className="flex items-center justify-center h-20 text-muted-foreground text-xs text-center">
                 <div>
@@ -640,6 +641,7 @@ const SidebarChatTab: React.FC = () => {
             )}
 
             <div ref={messagesEndRef} />
+            </div>
           </div>
         </ScrollArea>
       </div>