fix(webui): finish mobile containment for inline code, tables, chips, user bubbles
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>
This commit is contained in:
committed by
Xubin Ren
co-authored by
Claude
parent
162b6ee5bd
commit
70505bd1fc
@@ -87,7 +87,7 @@ export function FileReferenceChip({
|
||||
<span
|
||||
data-sheen-text={active ? displayText : undefined}
|
||||
className={cn(
|
||||
"min-w-0 max-w-full truncate",
|
||||
"min-w-0 max-w-full [overflow-wrap:anywhere] sm:truncate",
|
||||
active && "streaming-text-sheen file-reference-sheen",
|
||||
textClassName,
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user