fix(central-ui): rail nav scrolls in its own pane so the footer stays pinned

NavMenu wraps its items in .rail-scroll; site.css fills the sticky rail on
lg+ and lets that wrapper scroll. Kit untouched.

Claude-Session: https://claude.ai/code/session_01Y5ef34iUUMjmwnMpL9xgmB
This commit is contained in:
Joseph Doherty
2026-09-14 13:31:19 -04:00
parent 47e20dd8a8
commit 0762d69132
3 changed files with 48 additions and 1 deletions
@@ -5,8 +5,12 @@
(brand bar + responsive hamburger) belongs to ThemeShell; this component
contributes only the nav items. Collapsible sections use the kit's
NavRailSection (<details>); their open/closed state is persisted client-side
by the kit's nav-state.js (localStorage, keyed by Key) — no JS interop here. *@
by the kit's nav-state.js (localStorage, keyed by Key) — no JS interop here.
Everything below is wrapped in .rail-scroll, the scroll pane defined in
site.css: a long nav scrolls under the brand bar while the rail footer
stays pinned, and the kit itself is untouched. *@
<div class="rail-scroll">
<NavRailItem Href="/" Text="Dashboard" Match="NavLinkMatch.All" />
<AuthorizeView>
@@ -153,3 +157,4 @@
</AuthorizeView>
</Authorized>
</AuthorizeView>
</div>
@@ -170,3 +170,24 @@
/* Backdrop — slightly darker overlay in dark mode */
--sb-backdrop: rgba(0, 0, 0, 0.6);
}
/* ── Rail nav scroll pane ────────────────────────────────────────────────
ThemeShell's nav.side-rail is a flex column inside the sticky 100vh
#theme-rail (lg+), but it never fills that height and nothing inside it
scrolls, so a long nav grows past the viewport and carries the footer
with it. Fill the rail and let the nav items (NavMenu's .rail-scroll
wrapper) scroll while the brand bar and .rail-foot stay put. Below lg the
rail is inline and scrolls with the page, so the rule is scoped to lg+.
The kit is untouched (deferred-work register: upstream into
ZB.MOM.WW.Theme so the other consumers get it too). */
@media (min-width: 992px) {
#theme-rail > .side-rail {
height: 100%;
}
.rail-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
}