From 0571d1c0ffd2b1519983cee04cd6d0c188d728fb Mon Sep 17 00:00:00 2001 From: Tudor Date: Tue, 22 Sep 2026 20:43:58 +0100 Subject: [PATCH] fix(web): stop the sheet-open rule stealing .sectionNav's layout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Review catch, and a bad one: the previous commit anchored its insertion on `padding: 0.5rem 0.75rem;` and closed .sectionNav there. Everything that followed in the rule — margin-bottom, box-shadow, display: flex, align-items, gap — was orphaned into .sectionNavSheetOpen, which is only applied while the mobile jump sheet is open. So the sticky nav lost its flex layout, spacing and shadow in the closed state, which is virtually every page view on every school detail page. A site-wide regression introduced by a fix for one mobile menu. Redone by anchoring on the complete rule, closing brace included, so nothing can be orphaned. .sectionNav is now byte-identical to main and the diff is purely additive; .sectionNavSheetOpen carries the z-index and nothing else. The staging experiment that validated this fix set nav.style.zIndex = '1100' with every other declaration intact, so it was always testing this version rather than the broken one. Co-Authored-By: Claude Opus 5 --- .../school/SchoolDetailShell.module.css | 27 ++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) 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;