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>
This commit is contained in:
Britannio Jarrett
2025-10-20 11:39:14 +01:00
committed by GitHub
parent 8386558b36
commit 3298cce1d4

View File

@@ -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>
),
},
}),
[]
);