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:
hata
2026-07-06 12:11:43 +08:00
committed by Xubin Ren
co-authored by Claude
parent 162b6ee5bd
commit 70505bd1fc
4 changed files with 22 additions and 11 deletions
+4 -6
View File
@@ -558,12 +558,10 @@
overflow-x: auto;
}
/* Wide markdown tables scroll horizontally within the conversation column. */
.markdown-content table {
display: block;
max-width: 100%;
overflow-x: auto;
}
/* Wide markdown tables scroll horizontally within the conversation column.
Tables are wrapped in an overflow-x:auto <div> by the markdown renderer's
custom `table` component (see MarkdownTextRenderer); min-w-max on the
<table> keeps natural column widths so it scrolls instead of shrinking. */
/* Clip any residual horizontal bleed at the thread column edge. Vertical
scrolling and internal code-block scroll are unaffected. */