From 921fe4212fa0a230a04901309e967197d1f5e59f Mon Sep 17 00:00:00 2001 From: Tudor Date: Thu, 2 Jul 2026 15:54:49 +0100 Subject: [PATCH] fix(school-detail): float Compare over the map band, not the school name MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Regression from d4d9ae5 (map-blended hero): .headerHasMap .actions was absolutely positioned intending to float over the map, but its containing block was .headerContent — made position:relative in the same commit — so top:14px anchored it to the title block below the map. On mobile the H1 spans the full width and the legacy '.actions { width: 100% }' rule still applied, stretching the glassy button across the school name and leaving a ~6px legible sliver between it and the map fade. Anchor .actions to .header by moving position:relative/z-index:3 from .headerContent to .titleSection (the element that actually needs to sit above the fade), and set width:auto on the floating variant so the mobile full-width rule can't reach it. Applied to both detail views. Co-Authored-By: Claude Fable 5 --- nextjs-app/components/SchoolDetailView.module.css | 9 +++++++++ .../components/SecondarySchoolDetailView.module.css | 9 +++++++++ 2 files changed, 18 insertions(+) diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css index 956fa63..375ad3c 100644 --- a/nextjs-app/components/SchoolDetailView.module.css +++ b/nextjs-app/components/SchoolDetailView.module.css @@ -53,6 +53,12 @@ .headerHasMap .headerContent { padding-top: 0; margin-top: -0.5rem; +} + +/* The title (not the whole content row) rises above the map fade. Keeping + .headerContent unpositioned matters: .actions must anchor to .header so it + floats over the map band, not over the title. */ +.headerHasMap .titleSection { position: relative; z-index: 3; } @@ -63,6 +69,9 @@ right: 14px; z-index: 6; margin: 0; + /* Beat the mobile `.actions { width: 100% }` rule — a floating button + must never stretch across the title. */ + width: auto; } .headerHasMap .actions .btnAdd { diff --git a/nextjs-app/components/SecondarySchoolDetailView.module.css b/nextjs-app/components/SecondarySchoolDetailView.module.css index 29b1a06..c188fda 100644 --- a/nextjs-app/components/SecondarySchoolDetailView.module.css +++ b/nextjs-app/components/SecondarySchoolDetailView.module.css @@ -53,6 +53,12 @@ .headerHasMap .headerContent { padding-top: 0; margin-top: -0.5rem; +} + +/* The title (not the whole content row) rises above the map fade. Keeping + .headerContent unpositioned matters: .actions must anchor to .header so it + floats over the map band, not over the title. */ +.headerHasMap .titleSection { position: relative; z-index: 3; } @@ -63,6 +69,9 @@ right: 14px; z-index: 6; margin: 0; + /* Beat the mobile `.actions { width: 100% }` rule — a floating button + must never stretch across the title. */ + width: auto; } .headerHasMap .actions .btnAdd {