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>
On mobile-width browsers the conversation column and bottom composer could
be forced wider than 100vw: long markdown (URLs, branch names, file paths),
fenced code, and tables stretched the prose container, and the thread scroll
area let the overflow bleed horizontally (#4693).
Add a pure-CSS containment safety net in globals.css:
- .markdown-content gets min-width:0, max-width:100%, overflow-wrap:anywhere
so long tokens wrap instead of stretching the column.
- long links and inline code break rather than overflow.
- fenced/pre blocks and markdown tables scroll inside their own box.
- the thread scroll column clips residual horizontal bleed (overflow-x:hidden)
while vertical scroll and internal code-block scroll are unaffected.
No component, JS, or agent-loop behavior touched; desktop layout unchanged.
Fixes#4693
Co-Authored-By: Claude <noreply@anthropic.com>
