From f063383e61db166297add494a1f98f7b57767944 Mon Sep 17 00:00:00 2001
From: serversdown <brian@serversdown.net>
Date: Fri, 15 May 2026 06:22:08 +0000
Subject: [PATCH] fix(project-overview): Leaflet map z-index leak covered
 modals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 templates/partials/projects/project_dashboard.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/templates/partials/projects/project_dashboard.html b/templates/partials/projects/project_dashboard.html
index 7d9387b..5b859e2 100644
--- a/templates/partials/projects/project_dashboard.html
+++ b/templates/partials/projects/project_dashboard.html
@@ -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>