) should ever scroll, not the topbar or sidebar.

is offset by matching margins (from the shared --shell-* variables in css/base.css) rather than being a flex/grid sibling, since a fixed element can't participate in either layout anyway; the page's own normal scroll then only ever moves

's content behind the pinned chrome. The sidebar still doesn't get its own overflow-y:auto/scrollbar — per the same feedback, its content (js/ui/sidebar.js) is kept compact enough to fit a normal viewport on its own rather than needing one. */ #app-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: var(--shell-topbar-height); } #app-shell { position: fixed; top: var(--shell-topbar-height); left: 0; bottom: var(--shell-playerbar-height); width: var(--shell-sidebar-width); z-index: 25; display: flex; flex-direction: column; gap: 0.65rem; padding: 0.75rem; background: var(--tilt-surface); border-right: 2px solid var(--tilt-accent); overflow: hidden; } body:has(#app-shell) > main { margin-top: var(--shell-topbar-height); margin-left: var(--shell-sidebar-width); margin-bottom: var(--shell-playerbar-height); min-height: calc(100vh - var(--shell-topbar-height) - var(--shell-playerbar-height)); min-width: 0; } /* Cinema and DJ rooms (js/ui/room-page.js's applyRoomLayout() toggles this class on for either room type): the permanent personal sidebar reclaims its normal fixed-column space for the room's own wide content instead (video, or the big chat + full-width mixing desk), and becomes an overlay you pull out on demand — still position:fixed, but slid off-screen by default and layered above the page (with a click-to-close backdrop) rather than pinned in the layout. Desktop only, matching every other fixed-chrome rule in this file — the sidebar's already inline/collapsed below the 60rem breakpoint, so there's nothing to overlay on mobile. */ @media (min-width: 60.01rem) { /* Bug found verifying this: a bare `body.room-menu-overlay > main` (0-1-0-1 specificity) loses to the base rule above, `body:has(#app-shell) > main` — :has()'s specificity is that of its most specific argument, so :has(#app-shell) contributes an ID's worth (1-0-0), making the base rule 1-0-0-2 overall. Repeating the same :has() clause here matches that ID contribution and adds .room-menu-overlay on top, so this unambiguously wins regardless of declaration order. Confirmed via computed style, not just visual inspection — margin-left stayed 256px here even though #app-shell itself was already correctly transformed off-screen (a full-page screenshot's own capture quirk with position:fixed elements had made that part look broken when it wasn't; the margin was the real bug). */ body.room-menu-overlay:has(#app-shell) > main { margin-left: 0; } body.room-menu-overlay #app-shell { transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 0.5rem 0 1.5rem rgba(0, 0, 0, 0.5); } body.room-menu-overlay #app-shell.is-open { transform: translateX(0); } .room-shell-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 24; } } /* --- Profile block ------------------------------------------------- */ .sidebar-profile { display: flex; gap: 0.6rem; align-items: flex-start; } .sidebar-profile-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .sidebar-profile-name { font-weight: 700; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-profile-info a { font-size: 0.78rem; } .sidebar-online-indicator { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--tilt-text-muted); } .online-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #3fb950; flex-shrink: 0; } /* --- Avatars (shared by profile block + who's-online grid) --------- */ .avatar-img, .avatar-fallback { border-radius: calc(var(--tilt-radius) / 2); object-fit: cover; flex-shrink: 0; } .avatar-fallback { display: flex; align-items: center; justify-content: center; background: var(--tilt-accent); color: var(--tilt-accent-contrast); font-weight: 700; } .avatar-md { width: 2.5rem; height: 2.5rem; } .avatar-sm { width: 1.75rem; height: 1.75rem; } /* --- people.html's discovery grid (reuses the avatar classes above) --- */ .people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 1rem; margin-top: 1rem; } .person-card { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; color: var(--tilt-text); text-decoration: none; padding: 0.75rem; border-radius: var(--tilt-radius); } .person-card:hover { background: var(--tilt-surface); color: var(--tilt-accent); } .person-card .avatar-md { width: 4rem; height: 4rem; border-radius: 50%; font-size: 1.5rem; } /* --- Nav-with-counts ------------------------------------------------- */ .sidebar-nav ul { display: flex; flex-direction: column; gap: 0.05rem; } .sidebar-nav a, .sidebar-nav li.is-disabled span { display: flex; justify-content: space-between; padding: 0.3rem 0.5rem; border-radius: calc(var(--tilt-radius) / 2); font-size: 0.82rem; font-weight: 600; } .sidebar-nav a { color: var(--tilt-text); text-decoration: none; } .sidebar-nav a:hover { background: rgba(255, 45, 149, 0.12); color: var(--tilt-accent); } .sidebar-nav a[aria-current="page"] { background: var(--tilt-accent); color: var(--tilt-accent-contrast); } .sidebar-nav-count { color: inherit; opacity: 0.7; font-weight: 400; } .sidebar-nav li.is-disabled span { color: var(--tilt-text-muted); font-weight: 400; font-style: italic; } /* --- Boxes: My Pages / Who's Online ----------------------------------- */ .sidebar-box-label { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--tilt-font-display); font-size: 0.78rem; color: var(--tilt-accent); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; } .sidebar-box-action { text-transform: none; letter-spacing: normal; font-size: 0.75rem; font-family: var(--tilt-font-body); } .sidebar-pages-list { display: flex; flex-direction: column; gap: 0.1rem; } .sidebar-pages-list li { display: flex; align-items: center; gap: 0.4rem; } .sidebar-pages-list a { color: var(--tilt-text-muted); text-decoration: none; font-size: 0.8rem; padding: 0.15rem 0; } .sidebar-pages-list a:hover { color: var(--tilt-accent); } .sidebar-pages-list .add-page-link { color: var(--tilt-accent); font-weight: 600; } .page-marker { width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 1px solid var(--tilt-text-muted); flex-shrink: 0; } .page-marker.is-current { background: var(--tilt-accent); border-color: var(--tilt-accent); } .sidebar-online-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; } /* --- Footer ------------------------------------------------------------ */ .sidebar-footer { margin-top: auto; } .sidebar-footer button { width: 100%; font-size: 0.75rem; padding: 0.4rem 0.75rem; } @media (max-width: 60rem) { /* Below this width the topbar's nav/search/icons no longer fit one fixed-height row (they wrap), which would break the fixed-height assumption --shell-topbar-height and

's margin rely on. Simplest correct fix: drop back to normal in-flow stacking on mobile — topbar, then sidebar as a horizontal row, then main — same as this fallback always did before Phase 12's fixed-position rework, which is a desktop-only refinement. */ #app-topbar, #app-shell { position: static; width: auto; height: auto; } #app-shell { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: none; border-bottom: 2px solid var(--tilt-accent); } body:has(#app-shell) > main { margin-top: 0; margin-left: 0; } }