From 1760f77cfff0f66cfef577ae18bf9e88a7a34b13 Mon Sep 17 00:00:00 2001 From: DEIs Date: Tue, 22 Sep 2026 22:12:49 +0200 Subject: [PATCH] fix(map): isolate Leaflet stacking context so the Topbar dropdown sits above the map MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Leaflet's internal panes use z-index 200..1000 (tile, overlay, marker, popup, controls). The map wrapper had no z-index of its own, so those values leaked up to the dashboard layout and buried the Topbar's `All Sites` dropdown — which sits at z-50 by default. The Topbar itself is in a non-overlapping zone so it looked fine, but the dropdown's content (portalled into document.body) dropped into the map area and got hidden behind the tile pane. Add `isolation: isolate` to the map wrapper so Leaflet's z-index ladder is contained inside the wrapper as a single atomic unit. External UI at z-50+ now floats above the map as expected. The legend and layer switcher inside the wrapper are unchanged (still z-[400]) — they remain above the tile pane and below the map controls, which is where they were before. No-op for every other page; the wrapper is only on /dashboard/plant/map. --- src/app/dashboard/plant/map/map-view.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/app/dashboard/plant/map/map-view.tsx b/src/app/dashboard/plant/map/map-view.tsx index e00318a..0cf617d 100644 --- a/src/app/dashboard/plant/map/map-view.tsx +++ b/src/app/dashboard/plant/map/map-view.tsx @@ -122,8 +122,18 @@ export function MapView({ vehicles, sites }: { vehicles: MapVehicle[]; sites: Ma // for the Topbar (~4rem) plus ~5rem of vertical breathing room // (margin + the bottom-of-page gap). On phones the margin tightens // so the map still gets most of the screen. + // + // `isolate` (= `isolation: isolate`) traps Leaflet's internal + // z-index ladder (tile=200, overlay=400, marker=600, popup=700, + // controls=1000) inside the wrapper. Without it those values leak + // up to the dashboard layout and bury the Topbar's "All Sites" + // dropdown (z-50) when it opens over the map area. With it, the + // dropdown stays above because it competes with the wrapper as a + // single atomic unit. Nothing inside the wrapper needs to change — + // the legend / layer switcher are already at `z-[400]`, which is + // well above the tile pane but well below the marker controls. return ( -
+
{vehicles.length === 0 && (