fix(webui): keep chat viewport and composer inside narrow viewports

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>
This commit is contained in:
hata
2026-07-06 12:11:43 +08:00
committed by Xubin Ren
co-authored by Claude
parent b1d29ede7d
commit 162b6ee5bd
+47
View File
@@ -523,4 +523,51 @@
.scrollbar-track-transparent::-webkit-scrollbar-track {
background: transparent;
}
/*
* Mobile responsive safety net — keep the chat viewport + composer inside a
* narrow viewport (see #4693). These are containment rules: long markdown
* (URLs, branch names, file paths, code, tables) wraps or scrolls inside its
* own box instead of forcing the whole column — and thus the page — wider
* than 100vw. Desktop layout is unchanged; the rules only engage when content
* would otherwise overflow. Fenced code blocks keep their own internal
* horizontal scroll (CodeBlock and the markdown <pre> wrappers already set
* overflow-x: auto), so clipping the thread column horizontally is safe.
*/
/* Prose container: allow it to shrink within its column and break long words
so long URLs / paths never stretch the conversation wider than 100vw. */
.markdown-content {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-wrap: break-word;
}
/* Long links and inline code break rather than stretch the column. */
.markdown-content a,
.markdown-content code {
overflow-wrap: anywhere;
word-wrap: break-word;
}
/* Fenced / pre blocks scroll inside their own box, never the page. */
.markdown-content pre,
.not-prose pre {
max-width: 100%;
overflow-x: auto;
}
/* Wide markdown tables scroll horizontally within the conversation column. */
.markdown-content table {
display: block;
max-width: 100%;
overflow-x: auto;
}
/* Clip any residual horizontal bleed at the thread column edge. Vertical
scrolling and internal code-block scroll are unaffected. */
.thread-viewport-scrollbar {
overflow-x: hidden;
}
}