mobile-fix.css

/* ── 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;
    }
}