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;