bug: long strings in chat responses break layout in chat tab

[vybe]

Summary

Long unbroken strings (URLs, tokens, code identifiers, base64, etc.) inside agent chat responses overflow their container in the chat tab, pushing the layout horizontally and breaking the page on the agent detail view.

Context

When an agent returns a response containing a very long single-line string (e.g., a long URL, API key, file path, or JSON blob without spaces), the message bubble does not wrap the text. Instead the bubble grows wider than its column, which forces the entire chat tab — and surrounding page chrome — to scroll horizontally. Markdown code blocks and inline code seem most affected.

Acceptance Criteria

• Long unbroken strings in user and assistant messages wrap inside the chat bubble (no horizontal page scroll)
• Code blocks (<pre> / <code>) either wrap or scroll inside the bubble, not pushing layout
• Inline code (<code>) with long content wraps via overflow-wrap: anywhere (or equivalent)
• Long URLs in markdown links wrap at safe break points
• Verified on agent detail → Chat tab with a representative long-string payload (URL + base64 + path)
• No regression in normal markdown rendering, lists, or short messages

Technical Notes

• Likely fix lives in the chat message component / markdown renderer styles in src/frontend/src/
• Candidates: overflow-wrap: anywhere, word-break: break-word, min-width: 0 on flex children, max-width: 100% on pre/code, plus overflow-x: auto on <pre> blocks
• Also check the message bubble container — if it uses width: max-content or missing min-width: 0 inside a flex column, the child can force overflow regardless of word-break rules
• Verify against utils/markdown.js (DOMPurify path) — no sanitization changes needed, purely CSS

[vybe]

Closed by merged PR.