`` with a hardcoded width (Tailwind ``min-w-[...]`` / ``w-[...]`` utilities, wide tables, page-header action rows) makes the body horizontally scrollable; the sticky bar then tracks horizontally with that scroll and the fixed overlay drifts off the visible viewport. This is a temporary belt — Story 18.2's "Responsive Foundation — Lists & Tables" pass is what removes the *source* of the overflow by collapsing those hardcoded widths. Once 18.2 lands this rule becomes a no-op and can stay (defence in depth) or be removed. Scoped to ``base.html`` pages because ``base_dashboard.html`` (TV / kiosk) does not link this stylesheet. */ html, body { overflow-x: hidden; } /* Desktop sidebar stays hidden on mobile; the mobile nav above provides primary navigation + sign-out. */ .sidebar { display: none; } body.has-sidebar { flex-direction: column; } /* Story 18.2 AC #1 — cap

at viewport width on mobile. In the column-flex body,

is a flex item sized cross-axis by ``align-items: stretch``. Stretch only sets a LOWER bound (item ≥ container cross-axis); it does not cap item width. The existing ``min-width: 0`` (above) likewise only allows main to shrink, not to be capped. With no upper bound, a wide intrinsic child (the canonical case: a ```` with ``whitespace-nowrap`` cells whose summed column min-content is ~830px) propagates up through the auto-width block chain (.table-scroll-wrap → section → main) and grows main past the viewport. The 18.1 ``overflow-x: hidden`` clamp above hides the visual overflow but does not constrain ``

``'s computed width — verified empirically on /control where main rendered at 862px on a 360px viewport. ``max-width: 100vw`` is the upper bound the cascade was missing. It caps main at the viewport, so descendants inherit a constrained content area and wide tables actually scroll inside their ``.table-scroll-wrap`` parents. AC #1 ("body's width equals device viewport width") then holds across every ``base.html`` page without per-page patches. */ body.has-sidebar > main { max-width: 100vw; } .mobile-nav { display: block; } /* Sticky top app bar. ``position: sticky`` (NOT ``fixed``) so the bar stays in normal flow and ``

`` renders below it — never overlapping the page ``

``. Sticky requires the bar to be a flow sibling of the scrolling content; ``base.html`` includes this partial as a direct child of ```` before ``
`` for that reason. / .mobile-app-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; height: 56px; padding: 0 0.75rem; background-color: var(--sidebar-bg); color: var(--sidebar-fg); border-bottom: 1px solid var(--color-border); } .mobile-nav-menu-button, .mobile-nav-close-button { / 44×44 hit target (roadmap D4). / display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0.5rem; background: none; border: 1px solid transparent; color: var(--sidebar-fg); cursor: pointer; border-radius: 0; transition: background-color var(--sidebar-transition); } .mobile-nav-menu-button:hover, .mobile-nav-menu-button:focus-visible, .mobile-nav-close-button:hover, .mobile-nav-close-button:focus-visible { background-color: var(--sidebar-bg-hover); outline: none; } .mobile-nav-menu-button:focus-visible, .mobile-nav-close-button:focus-visible { outline: 2px solid var(--sidebar-active-bg); outline-offset: 2px; } .mobile-app-bar-brand { display: inline-flex; align-items: center; text-decoration: none; padding: 0.25rem 0.5rem; } .mobile-app-bar-logo { min-height: 28px; } / The overlay panel itself. Covers the viewport, owns its scroll container (``overflow-y: auto``) so the section list + user/sign- out block stay reachable on 360×640 with large OS text. Sizing rationale (Story 18.1 UAT fix): explicit ``width: 100vw`` and ``left: 0; top: 0`` (instead of ``inset: 0``) so the overlay's containing block can't drift when the underlying page has horizontal overflow on iOS Safari / mobile Chrome. ``max-width: 100vw`` belts-and-braces against any wide descendant escaping the overlay. ``height: 100dvh`` (with a 100vh fallback below) avoids the iOS toolbar-collapse gap where ``vh`` is computed against the largest viewport state and leaves a band of empty space at the bottom. ``overflow-x: hidden`` lets long user names / a wide ``Sign Out`` form get clipped or wrap inside the overlay rather than expanding the overlay box. / .mobile-nav-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; / ``left: 0; right: 0`` is what actually pins the overlay to the viewport edges. ``width: 100%`` reinforces it via the overlay's containing block (the initial containing block for ``position: fixed``), which is the device-width layout viewport — unlike ``100vw``, which on iOS Safari resolves to the layout viewport including any horizontal page overflow and was making the overlay open wider than the screen with the labels off the left edge (Story 18.1 UAT fix). / width: 100%; height: 100%; height: 100dvh; z-index: 70; display: flex; flex-direction: column; background-color: var(--sidebar-bg); color: var(--sidebar-fg); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; transform: translateX(-100%); transition: transform var(--sidebar-transition); } .mobile-nav-overlay:not([hidden]) { transform: translateX(0); } / ``[hidden]`` is the JS-toggled visibility hook; restore the overlay's flex layout when visible (the UA stylesheet's ``display: none`` for ``[hidden]`` would clobber flex otherwise). / .mobile-nav-overlay[hidden] { display: none; } .mobile-nav-overlayheader { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; border-bottom: 1px solid var(--color-border); } .mobile-nav-overlaylogo-link { display: inline-flex; align-items: center; text-decoration: none; } .mobile-nav-overlaylogo { max-width: 140px; } / ``flex-shrink: 0`` (not ``flex: 1 1 auto``) so the nav block sizes to its natural content height. The user-info partial below it then sits directly under "Coming Soon" rather than being pushed to the bottom of the overlay with a stretch-gap above it (Story 18.1 UAT fix). If total content still exceeds the viewport height (large OS text, narrow phone), ``overflow-y: auto`` on the overlay reveals the rest. / .mobile-nav-overlaynav { flex-shrink: 0; padding: 0.25rem 0; } .mobile-nav-overlaylist { list-style: none; margin: 0; padding: 0; } .mobile-nav-overlayitem { margin: 0; } .mobile-nav-overlaygroup-item { margin: 0; border-bottom: 1px solid var(--color-border); } .mobile-nav-overlaygroup-summary { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0.625rem 1rem; color: var(--nstx-ink-3); cursor: pointer; font-family: var(--font-mono); font-size: 0.61rem; font-weight: 700; letter-spacing: 0.18em; list-style: none; text-transform: uppercase; } .mobile-nav-overlaygroup-summary::-webkit-details-marker { display: none; } .mobile-nav-overlaygroup-summary::marker { content: ""; } .mobile-nav-overlaygroup.is-active > .mobile-nav-overlaygroup-summary { background-color: var(--sidebar-bg-hover); color: var(--nstx-ink); } .mobile-nav-overlaychildren { list-style: none; margin: 0; padding: 0 0 0.5rem; } / ``min-height: 44px`` preserves the touch-target floor; vertical padding trimmed from 0.75rem to 0.4rem so the 11-item list fits a 640px-tall viewport alongside the header + user-info block (Story 18.1 UAT fix). / .mobile-nav-overlaylink { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0.4rem 1rem 0.4rem 1.75rem; color: var(--nstx-ink-2); font-family: var(--font-mono); text-decoration: none; font-size: 0.61rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; } .mobile-nav-overlaylink:hover, .mobile-nav-overlaylink:focus-visible { background-color: var(--sidebar-bg-hover); outline: none; } .mobile-nav-overlaylink:focus-visible { outline: 2px solid var(--sidebar-active-bg); outline-offset: -2px; } .mobile-nav-overlaylink.is-active { background-color: var(--sidebar-active-bg); color: var(--sidebar-active-fg); } .mobile-nav-overlaylink.is-active:hover { background-color: var(--sidebar-active-bg); } .icon-mobile-nav { font-size: 24px; font-variation-settings: 'opsz' 24, 'wght' 400, 'FILL' 0, 'GRAD' 0; line-height: 1; vertical-align: middle; } .mobile-nav-overlaylink.is-active .icon-mobile-nav { font-variation-settings: 'opsz' 24, 'wght' 400, 'FILL' 1, 'GRAD' 0; } / Reuse of ``partials/sidebar_user_info.html`` inside the overlay: the identity/sign-out block renders fully here because ``.sidebar.is-collapsed`` is never set on this surface (the desktop-collapse rules only fire inside ``.sidebar``). It sits directly under the section list with a top border + comfortable padding so the Sign Out button stays reachable; the prior ``margin-top: auto`` was removed so it doesn't get pushed to the bottom of the viewport with an empty gap above (Story 18.1 UAT fix). / .mobile-nav-overlay .sidebar-user { padding: 0.75rem 1rem 1rem; border-top: 1px solid var(--color-border); flex-shrink: 0; } } / Body scroll lock while the overlay is open. Applied to ```` by ``mobile_nav.js``; lives outside the mobile media query so the lock stays in effect even if the viewport is rotated to landscape while the overlay is open. */ body.mobile-nav-open { overflow: hidden; }