David/MEGAINFRA-WEBAPP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(map): isolate Leaflet stacking context so the Topbar dropdown sits above the map

Browse source 
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.
This commit is contained in:
DEIs 2026-09-22 22:12:49 +02:00
parent 87f75dd98f
commit 1760f77cff
1 changed files with 11 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/app/dashboard/plant/map/map-view.tsx
View file

@ -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 (
<div className="relative mx-3 my-4 h-[calc(100dvh-9rem)] sm:mx-5 sm:my-5 lg:mx-6 lg:my-6">
<div className="isolate relative mx-3 my-4 h-[calc(100dvh-9rem)] sm:mx-5 sm:my-5 lg:mx-6 lg:my-6">
<LeafletMap vehicles={vehicles} sites={sites} baseLayer={baseLayer} />
{vehicles.length === 0 && (