` carries `mx-auto max-w-7xl px-4 py-8`, and because `@layer utilities` is declared after `@layer components`, the utilities won on layer order no matter how specific the selector was. A 100dvh shell therefore sat inside a padded, width-capped box, below the fold, in a body locked with `overflow: hidden` — so the Owner panel could not be scrolled at all. See "OWNER WORKSPACE LAYOUT OVERRIDES" below. */ /* HORIZONTAL SCALING Long titles, emails and URLs in tables were stretching the flex/grid children instead of wrapping, so the panel grew past the viewport. The rules below let those cells shrink and wrap, and keep the scroll region on the body rather than the page. */ .admin-body { overflow-x: hidden; } /* Tables that the views already wrap in `.overflow-x-auto` keep the default auto layout so they can scroll; only loose tables are pinned to the container width, otherwise `table-layout: fixed` would squeeze their columns into unreadable slivers. */ .admin-body table:not(.overflow-x-auto table) { table-layout: fixed; width: 100%; } .admin-body td, .admin-body th { /* Without this, a long unbroken string sets the column's minimum width. */ overflow-wrap: anywhere; word-break: break-word; } .admin-body img { max-width: 100%; height: auto; } /* Dialogs opened from the workspace must not exceed the viewport either. */ .admin-shell dialog { max-width: min(56rem, calc(100vw - 2rem)); } /* PHONE TUNING Wider tables stop trying to squeeze into a phone viewport and scroll sideways inside their own container instead, so a single column of data is never compressed to an unreadable sliver. */ @media (max-width: 47.999rem) { .admin-topbar { padding: 0.6rem 0.75rem; gap: 0.5rem; } .admin-body { padding: 0.75rem; } .admin-body table { /* Undo the desktop `fixed` layout: real auto layout + a min width lets the table scroll horizontally rather than crush its columns. */ table-layout: auto; min-width: 34rem; } /* Tables the views already wrap get their own scroll container. */ .admin-body .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* PHONE: UNLOCK THE DOCUMENT AND SHRINK THE TAB STRIP This block is last in the layer on purpose. The desktop scroll lock and the tab-strip rules above share this layer and specificity, so the last declaration is the one that applies — these phone overrides have to come after them to take effect at all. Two problems it solves, both reported on Android but harmless on iOS: 1. The desktop design pins the shell to 100dvh and scrolls an inner pane. Android animates the dynamic viewport as its URL bar collapses/expands, so a body with `overflow: hidden` ends up with content below the fold that nothing can reach. Here the document becomes the scroller again. 2. Ten tabs wrapped onto four rows and swallowed half the screen. The list is one horizontally-scrolling row, so it can never take more than a line. */ @media (max-width: 63.999rem) { body.admin-active { overflow: auto; overscroll-behavior-y: contain; } .admin-shell { height: auto; min-height: 100svh; overflow: visible; } .admin-body { overflow-y: visible; overscroll-behavior: auto; } .admin-nav { position: sticky; top: 0; z-index: 20; max-height: none; overflow: visible; padding: 0.4rem 0.6rem; } .admin-nav__list { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0.35rem; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .admin-nav__list::-webkit-scrollbar { display: none; } .admin-tab { width: auto; flex: 0 0 auto; white-space: nowrap; padding: 0.35rem 0.65rem; font-size: 0.7rem; } } } /* ============================================================================= OWNER WORKSPACE LAYOUT OVERRIDES — DELIBERATELY OUTSIDE EVERY @layer ----------------------------------------------------------------------------- These rules are unlayered on purpose. `@layer components` is declared before `@layer utilities` in this file, and Tailwind's own layer order means a utility ALWAYS beats a component regardless of how specific the component selector is. `

` carries `mx-auto max-w-7xl px-4 py-8`, so the `padding: 0` / `max-width: none` below used to be applied inside the components layer and silently discarded. Unlayered rules sit above all layers, so they now actually take effect. The bug they fix: the shell is a 100dvh app shell, but it was being rendered inside a padded, width-capped

that was itself below the site header. The document grew to ~1600px inside a 900px viewport while `body` was locked with `overflow: hidden`, so the lower half of the Newsroom Panel could not be reached by any means — the reported "I can't scroll the owner panel". ========================================================================== */ /* LAYER LADDER — declared in one place so the numbers cannot drift apart. 100 .skip-link 80 .toast-stack — toasts stay readable over every dialog 60 .modal-backdrop — EVERY dialog, including the gallery lightbox 50 #main-content while — the Newsroom Panel body.admin-active 1 .admin-topbar / .admin-nav (inside the 50 context) 0 reader views, page flow The panel sits BELOW 60 on purpose. The dialogs the Owner opens from inside the panel are body-level `.modal-backdrop`s, so they must still be able to rise above it. What the panel has to beat is the gallery lightbox, and that is handled two ways: it is raised into its own stacking context at 50 (above all static page flow), AND openAdmin() closes it. Either alone would be enough; together, a stale or late-opening lightbox cannot cover the panel. */ body.admin-active #main-content { /* `position` + `z-index` are the fix for "the gallery stays on top of the Owner panel". Without them #main-content is `position: static` with no z-index, so it is painted in normal flow BELOW every positioned descendant of — and the lightbox is exactly that (`position: fixed; z-index: 60`). Raising main into its own stacking context at 50 puts the whole panel, including its sticky nav and topbar, above the reader views while leaving body-level dialogs free to cover the panel. */ position: relative; z-index: 50; max-width: none; padding: 0; width: 100%; margin: 0; height: 100dvh; overflow: hidden; } /* Belt and braces: even if a lightbox were reopened by a stale handler while the panel is mounted, it must not paint over it. Hiding it outright is safer than relying on a higher z-index, because z-index alone cannot win once the two elements end up in different stacking contexts. */ body.admin-active #lightbox { display: none !important; } /* The panel owns the whole viewport, so nothing underneath it is clickable. `visibility: hidden` on the reader views additionally stops them being reached by Tab if the panel is ever closed by a path that forgets to re-show exactly one view. */ body.admin-active #publication-view, body.admin-active #gallery-view, body.admin-active #credits-view { visibility: hidden; pointer-events: none; } body.admin-active #admin-view { display: block; width: 100%; max-width: 100%; height: 100%; overflow: hidden; } /*

and