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:
committed by
Xubin Ren
co-authored by
Claude
parent
b1d29ede7d
commit
162b6ee5bd
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user