trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: isolate the Leaflet map's stacking context

Browse source 
The mobile nav drawer's backdrop (z-40) was being painted over by the Leaflet
map: `.leaflet-container` doesn't establish its own stacking context, so its
internal high z-indexes (panes ~200–700, zoom controls ~1000) competed with the
page and bled over the drawer overlay — the map stayed bright while the rest of
the page dimmed.

Add `isolation: isolate` (Tailwind `isolate`) to the map container so those
z-indexes stay contained and the map sits below page overlays (menus, modals,
dialogs) like any other content. Verified in the browser with the drawer open
over an activity-detail map.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-06-12 15:19:42 +02:00
parent 5e6fcde281
commit 830eff7d39
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
1 changed files with 5 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

6
apps/journal/app/components/RouteMapThumbnail.client.tsx
View file

@ -89,7 +89,11 @@ export function RouteMapThumbnail({ geojson, interactive, className, dayBreaks,
<MapContainer <MapContainer
center={[50, 10]} center={[50, 10]}
zoom={6} zoom={6}
className={className ?? "h-36 w-full rounded"} // `isolate` gives the Leaflet container its own stacking context so its
// internal high z-indexes (panes ~200–700, zoom controls ~1000) stay
// contained and can't paint over page overlays like the mobile nav
// drawer's backdrop.
className={`${className ?? "h-36 w-full rounded"} isolate`}
zoomControl={interactive ?? false} zoomControl={interactive ?? false}
attributionControl={interactive ?? false} attributionControl={interactive ?? false}
dragging={interactive ?? false} dragging={interactive ?? false}