diff --git a/nextjs-app/components/school/SchoolDetailShell.module.css b/nextjs-app/components/school/SchoolDetailShell.module.css index dcc4f9c..c519195 100644 --- a/nextjs-app/components/school/SchoolDetailShell.module.css +++ b/nextjs-app/components/school/SchoolDetailShell.module.css @@ -270,23 +270,11 @@ position: sticky; top: 64px; /* global header height on desktop */ z-index: 10; - /* `position: sticky` with a z-index makes this a stacking context, so the - jump sheet's own z-index only orders it INSIDE here. Against the fixed - bottom tab bar (Navigation.module.css, z-index 1000) what counts is this - value — which is why the sheet's last item was painted over, and - untappable, once the list grew long enough to reach the bar. Lifted only - while the sheet is open, and only to 1100: below the comparison toast - (2000), the fullscreen map (5000) and the info popover (9999). */ background: var(--bg-card); border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px; padding: 0.5rem 0.75rem; -} - - -.sectionNavSheetOpen { - z-index: 1100; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(var(--shadow-rgb), 0.04); display: flex; @@ -295,6 +283,21 @@ } +/* `position: sticky` with a z-index makes .sectionNav a stacking context, so + the jump sheet's own z-index only orders it INSIDE that context. Against the + fixed bottom tab bar (Navigation.module.css, z-index 1000) what counts is + .sectionNav's 10 — which is why the sheet's last item was painted over, and + untappable, once the list grew long enough to reach the bar. + + Lifted only while the sheet is open, and only to 1100: above the bar, below + the comparison toast (2000), the fullscreen map (5000) and the info popover + (9999). This rule carries the z-index and nothing else; every other + declaration belongs to .sectionNav in both states. */ +.sectionNavSheetOpen { + z-index: 1100; +} + + .sectionNavBack { flex: none; display: inline-flex;