File size: 3,062 Bytes
ce5974d b198e76 ce5974d b198e76 ce5974d b198e76 ce5974d b198e76 ce5974d b198e76 ce5974d b198e76 ce5974d b198e76 ce5974d b198e76 ce5974d b198e76 ce5974d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | /* ── Mobile overflow fix (v2 — universal clamp) ─────────────────────────────
The original console.css does not constrain message bubbles / tool-call
panels / code blocks to their parent width on narrow viewports. Rather
than chase every specific selector that can overflow (tool cards, code
blocks, tables, long URLs, etc.), this clamps horizontal overflow at the
document root AND forces every element below it to respect 100% width.
This is intentionally broad/aggressive because targeted fixes kept missing
elements that still pushed the layout wider than the screen.
----------------------------------------------------------------------- */
@media (max-width: 600px) {
html, body {
max-width: 100vw !important;
overflow-x: hidden !important;
}
/* Universal clamp: nothing inside the page may be wider than its
parent. !important is required because console.css sets explicit
widths/max-widths on specific elements (e.g. 760px dialogs) that
would otherwise win by specificity. */
body * {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* min-width:0 must be separate from max-width:100% — flex/grid items
default to min-width:auto, which lets content (like a long <pre>)
force the item wider regardless of max-width. This is usually the
real culprit behind "still overflowing" after a max-width fix. */
.chat-container, .msg-row, .msg, .msg-bubble, .msg-content,
.agent-steps, .agent-step, .agent-tool-step, .agent-thinking-step,
.agent-content-step, .tool-detail, .tool-detail-section,
.tool-header, .tool-name, div, section, article, main, aside {
min-width: 0 !important;
}
/* Code / tool I/O / preformatted text: must wrap, never force width.
overflow-wrap: anywhere breaks even unbroken strings (base64, long
URLs, JSON without spaces) as a last resort. */
pre, code, .tool-detail-content, .msg-content pre, .msg-content code,
.thinking-stream-pre, .thinking-full {
white-space: pre-wrap !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
overflow-x: hidden !important;
}
/* Tables (markdown tables in chat) must scroll inside their own box
instead of pushing the page wide. */
.msg-content table {
display: block !important;
overflow-x: auto !important;
white-space: nowrap !important;
}
/* Tighten side padding/margins that eat into already-scarce width. */
.agent-tool-step .tool-detail,
.agent-thinking-step .thinking-full {
margin-left: 0.4rem !important;
padding: 0.35rem !important;
}
.tool-detail-content {
font-size: 0.65rem !important;
}
/* Images/media must shrink to fit, never overflow. */
img, video, svg, iframe, canvas {
max-width: 100% !important;
height: auto !important;
}
}
|