From 3298cce1d44388c813bf26ad2193b8bbfa37f3cd Mon Sep 17 00:00:00 2001
From: Britannio Jarrett <33752528+britannio@users.noreply.github.com>
Date: Mon, 20 Oct 2025 11:39:14 +0100
Subject: [PATCH] Prevent user messages in the agent log from overflowing
 (vibe-kanban) (#1055)

* Fixed! Added `min-w-0` to the task content container in [UserMessage.tsx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/87a2-agent-task-log-o/frontend/src/components/NormalizedConversation/UserMessage.tsx#L80). This forces the flex child to respect its parent's width and allows long lines to wrap instead of creating horizontal scroll.

* Fixed! Added `break-words` and `overflow-wrap-anywhere` to the `<p>` tag override in [markdown-renderer.tsx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/87a2-agent-task-log-o/frontend/src/components/ui/markdown-renderer.tsx#L141). This ensures long words/URLs in the task description wrap instead of causing horizontal scroll.

* Cleanup script changes for task attempt 87a2a024-833a-402a-9c53-5752878fa289

* Fixed! Added a `pre` element override to the [markdown-renderer.tsx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/87a2-agent-task-log-o/frontend/src/components/ui/markdown-renderer.tsx#L203-L213) with `whitespace-pre-wrap break-words` to wrap long code lines instead of overflowing horizontally.

* Done! Removed both previous fixes. The `<pre>` override is the only change needed to fix the code block overflow.

* Done! Added comments explaining why each of the critical wrapping styles are needed for the `<pre>` element.

* Update frontend/src/components/ui/markdown-renderer.tsx

Co-authored-by: Gabriel Gordon-Hall <gabriel@bloop.ai>

---------

Co-authored-by: Gabriel Gordon-Hall <gabriel@bloop.ai>
---
 frontend/src/components/ui/markdown-renderer.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/src/components/ui/markdown-renderer.tsx b/frontend/src/components/ui/markdown-renderer.tsx
index 83784894..392560c0 100644
--- a/frontend/src/components/ui/markdown-renderer.tsx
+++ b/frontend/src/components/ui/markdown-renderer.tsx
@@ -197,6 +197,16 @@ function MarkdownRenderer({
           </li>
         ),
       },
+      pre: {
+        component: ({ children, ...props }: any) => (
+          <pre
+            {...props}
+            className="overflow-x-auto whitespace-pre-wrap break-words font-mono text-sm bg-muted/50 rounded-sm p-2 my-2"
+          >
+            {children}
+          </pre>
+        ),
+      },
     }),
     []
   );