serversdown/terra-view
1
0
Fork 0
Code Issues 16 Pull Requests Actions Packages Projects Releases 4 Wiki Activity

fix(project-overview): Leaflet map z-index leak covered modals

Browse Source 
The location map's tile-pane (z-index 200), marker-pane (600), and
control-pane (800) outranked the page modals' z-50 because the map's
container didn't establish its own stacking context.  Modals opened
over the page rendered BEHIND the map tiles (visible in the Edit
Location, Assign, Remove, etc. modals — anywhere overlapping the
right column).

Fixed with `isolation: isolate` on the map container.  That CSS
property forces a new stacking context without needing to rewrite
Leaflet's internal z-indexes, so all the map's panes stay contained
inside the card and z-50 modals correctly render on top.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
serversdown
2026-05-15 06:22:08 +00:00
parent 17c988c1ee
commit f063383e61
1 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/partials/projects/project_dashboard.html
+5 -1
View File
@@ -95,8 +95,12 @@
</a>
{% endif %}
</div>
<!-- `isolation: isolate` forces a new stacking context so Leaflet's
internal z-indexes (panes at 200-700, controls at 800) stay
contained inside this div instead of leaking into the root
stacking context and rendering over modals (which have z-50). -->
<div id="project-location-map" class="w-full rounded-lg border border-gray-200 dark:border-gray-700"
style="height: 320px; background: rgba(0,0,0,0.05);"></div>
style="height: 320px; background: rgba(0,0,0,0.05); isolation: isolate;"></div>
<div id="project-location-map-empty" class="hidden text-xs text-gray-500 dark:text-gray-400 mt-2 italic text-center">
No location coordinates set. Edit a location and add a <code class="font-mono">lat,lon</code> pair to see it here.
</div>