Fixes to the map display and several other bugs

map/app/public/css/style.css

@@ -84,12 +84,17 @@ body {
 
 /* Map container */
 #map-container {
-    flex: 1;
     position: relative;
-    overflow: hidden;
+    width: 100%;
+    height: calc(100vh - var(--header-height));
 }
 
 #map {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     width: 100%;
     height: 100%;
     background-color: #f0f0f0;
@@ -856,3 +861,63 @@ body {
         height: 100vh;
     }
 }
+
+/* Leaflet Circle Markers - Add this section */
+.leaflet-marker-icon {
+    background-color: transparent !important;
+    border: none !important;
+}
+
+.leaflet-interactive {
+    cursor: pointer;
+}
+
+/* Ensure circle markers are visible */
+path.leaflet-interactive {
+    stroke: #fff;
+    stroke-opacity: 1;
+    stroke-width: 2;
+    fill-opacity: 0.8;
+}
+
+/* Fix for marker z-index */
+.leaflet-pane.leaflet-marker-pane {
+    z-index: 600;
+}
+
+.leaflet-pane.leaflet-tooltip-pane {
+    z-index: 650;
+}
+
+.leaflet-pane.leaflet-popup-pane {
+    z-index: 700;
+}
+
+/* Ensure markers are above the map tiles */
+.leaflet-marker-pane svg {
+    position: relative;
+    z-index: 1;
+}
+
+/* Force circle markers to be visible */
+.leaflet-overlay-pane svg {
+    z-index: 1;
+}
+
+.leaflet-overlay-pane svg path {
+    cursor: pointer;
+    pointer-events: auto;
+}
+
+/* Ensure SVG circle markers are rendered */
+.location-marker {
+    cursor: pointer !important;
+}
+
+/* Override any conflicting styles */
+.leaflet-container path.leaflet-interactive {
+    stroke: #ffffff !important;
+    stroke-opacity: 1 !important;
+    stroke-width: 2px !important;
+    fill-opacity: 0.8 !important;
+}