map overlap bug fixed

backend/static/mobile.css

@@ -455,6 +455,54 @@
   }
 }
 
+/* ===== MAP OVERLAP FIX ===== */
+/* Prevent map and controls from overlapping UI elements on mobile */
+@media (max-width: 767px) {
+  /* Constrain leaflet container to prevent overflow */
+  .leaflet-container {
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  /* Override Leaflet's default high z-index values */
+  /* Bottom nav is z-20, sidebar is z-40, so map must be below */
+  .leaflet-pane,
+  .leaflet-tile-pane,
+  .leaflet-overlay-pane,
+  .leaflet-shadow-pane,
+  .leaflet-marker-pane,
+  .leaflet-tooltip-pane,
+  .leaflet-popup-pane {
+    z-index: 1 !important;
+  }
+
+  /* Map controls should also be below navigation elements */
+  .leaflet-control-container,
+  .leaflet-top,
+  .leaflet-bottom,
+  .leaflet-left,
+  .leaflet-right {
+    z-index: 1 !important;
+  }
+
+  .leaflet-control {
+    z-index: 1 !important;
+  }
+
+  /* When sidebar is open, hide all Leaflet controls (zoom, attribution, etc) */
+  body.menu-open .leaflet-control-container {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  /* Ensure map tiles are non-interactive when sidebar is open */
+  body.menu-open #fleet-map,
+  body.menu-open #unit-map {
+    pointer-events: none;
+  }
+}
+
 /* ===== PENDING SYNC BADGE ===== */
 .pending-sync-badge {
   display: inline-flex;

backend/static/mobile.js

@@ -20,12 +20,14 @@ function toggleMenu() {
       backdrop.classList.remove('show');
       hamburgerBtn?.classList.remove('menu-open');
       document.body.style.overflow = '';
+      document.body.classList.remove('menu-open');
     } else {
       // Open menu
       sidebar.classList.add('open');
       backdrop.classList.add('show');
       hamburgerBtn?.classList.add('menu-open');
       document.body.style.overflow = 'hidden';
+      document.body.classList.add('menu-open');
     }
   }
 }
@@ -41,6 +43,7 @@ function closeMenuFromBackdrop() {
     backdrop.classList.remove('show');
     hamburgerBtn?.classList.remove('menu-open');
     document.body.style.overflow = '';
+    document.body.classList.remove('menu-open');
   }
 }
 
@@ -56,6 +59,7 @@ function handleResize() {
       backdrop.classList.remove('show');
       hamburgerBtn?.classList.remove('menu-open');
       document.body.style.overflow = '';
+      document.body.classList.remove('menu-open');
     }
   }
 }