From eae62a4b421a41b2f6726f464298478f24a8e91b Mon Sep 17 00:00:00 2001 From: Tudor Date: Wed, 1 Jul 2026 20:26:30 +0100 Subject: [PATCH] fix(school-detail): make the hero map fade visible MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The blend gradient sat at z-index 2 — below Leaflet's tile pane (200) — so it was painted behind the map and the band ended in a hard edge with no diffusion. Raise the fade above the tile/overlay panes (450, still below the marker pane so the pin stays crisp) and the whole-band open button above the marker pane (800), and isolate the wrapper's stacking context so those raised z-indexes don't leak out and outrank the header's Compare button. Co-Authored-By: Claude Opus 4.8 --- nextjs-app/components/SchoolHeroMap.module.css | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/nextjs-app/components/SchoolHeroMap.module.css b/nextjs-app/components/SchoolHeroMap.module.css index 99d118b..4d06206 100644 --- a/nextjs-app/components/SchoolHeroMap.module.css +++ b/nextjs-app/components/SchoolHeroMap.module.css @@ -1,9 +1,13 @@ -/* Preview band that blends into the hero title; expands to fullscreen. */ +/* Preview band that blends into the hero title; expands to fullscreen. + isolation:isolate contains the map + fade + open-button z-indices (which + must beat Leaflet's internal panes) so they don't leak out and outrank the + header's Compare button. */ .wrapper { position: relative; width: 100%; height: 210px; background: #dfe6e2; + isolation: isolate; } @media (max-width: 640px) { @@ -38,7 +42,9 @@ .openBtn { position: absolute; inset: 0; - z-index: 3; + /* Above Leaflet's marker pane (600) so the whole band — pin included — is + one click target. Transparent, so map + pin still show through. */ + z-index: 800; width: 100%; height: 100%; padding: 0; @@ -82,7 +88,10 @@ right: 0; bottom: 0; top: 33%; - z-index: 2; + /* Above Leaflet's tile (200) and overlay (400) panes so the gradient is + actually visible, but below the marker pane (600) so the pin stays crisp + on top of the blend. */ + z-index: 450; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%,