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:
committed by
GitHub
parent
8386558b36
commit
3298cce1d4
@@ -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>
|
||||
),
|
||||
},
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user