57f9ec0 added a CSS containment safety net for .markdown-content, but
several rendering paths still overflowed or truncated on narrow viewports
because they bypass those rules or actively disable wrapping:
- Inline code longer than 120 chars renders as `block whitespace-pre`
with no scroll container, so it bled past the viewport (white-space:pre
defeats overflow-wrap). It now scrolls inside its own box via
max-w-full overflow-x-auto.
- Wide markdown tables never actually scrolled: Tailwind Typography forces
width:100% + table-layout:auto on .prose table, so they shrank to fit
instead of overflowing. Switched to a wrapper-<div> pattern (a custom
`table` component, the approach used by DeepSeek/others) with min-w-max
so wide tables keep natural column widths and scroll inside the
conversation column; the old display:block rule on .markdown-content
table is removed.
- File-reference chips and inline link-preview cards used `truncate`, so
long filenames/labels were ellipsized to one line. Now
[overflow-wrap:anywhere] sm:truncate — wrap on mobile, truncate on
desktop.
- User-authored message bubbles don't pass through .markdown-content, so
a long URL in the user's own message still burst the screen: under flex
min-width:auto, break-words cannot reduce the item's min-content width.
Added max-w-full min-w-0 + [overflow-wrap:anywhere].
No JS/agent/provider behavior touched. Desktop layout is unchanged — the
new rules only engage when content would otherwise overflow.
Verified: bun run lint (clean), bun run test (438 passed), bun run build.
Refs #4693
Co-Authored-By: Claude <noreply@anthropic.com>
70505bd1fc