Update map navigation control for better responsiveness

app/assets/stylesheets/leaflet_theme.css

@@ -214,3 +214,16 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(16, 185, 129, 0.7);
   border-radius: 50%;
 }
+
+/* Fix bottom controls being cut off */
+.leaflet-bottom {
+  padding-bottom: 10px !important;
+}
+
+.leaflet-bottom.leaflet-left {
+  padding-left: 10px !important;
+}
+
+.leaflet-bottom.leaflet-right {
+  padding-right: 10px !important;
+}

app/javascript/controllers/maps_controller.js

@@ -145,7 +145,7 @@ export default class extends BaseController {
       }
     });
 
-    new StatsControl().addTo(this.map);
+    this.statsControl = new StatsControl().addTo(this.map);
 
     // Set the maximum bounds to prevent infinite scroll
     var southWest = L.latLng(-120, -210);
@@ -200,6 +200,9 @@ export default class extends BaseController {
       this.addSettingsButton();
     }
 
+    // Add info toggle button
+    this.addInfoToggleButton();
+
     // Initialize the visits manager
     this.visitsManager = new VisitsManager(this.map, this.apiKey, this.userTheme);
 
@@ -751,6 +754,63 @@ export default class extends BaseController {
     this.settingsButtonAdded = true;
   }
 
+  addInfoToggleButton() {
+    // Store reference to the controller instance for use in the control
+    const controller = this;
+
+    const InfoToggleControl = L.Control.extend({
+      options: {
+        position: 'bottomleft'
+      },
+      onAdd: function(map) {
+        const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
+        const button = L.DomUtil.create('button', 'map-info-toggle-button', container);
+        button.innerHTML = 'ℹ️'; // Info emoji
+        button.title = 'Toggle stats visibility';
+
+        // Style the button with theme-aware styling
+        applyThemeToButton(button, controller.userTheme);
+        button.style.width = '34px';
+        button.style.height = '34px';
+        button.style.fontSize = '20px';
+        button.style.display = 'block';
+        button.style.lineHeight = '34px';
+        button.style.textAlign = 'center';
+        button.style.cursor = 'pointer';
+        button.style.border = 'none';
+        button.style.borderRadius = '4px';
+
+        // Disable map interactions when clicking the button
+        L.DomEvent.disableClickPropagation(container);
+
+        // Toggle stats visibility on button click
+        L.DomEvent.on(button, 'click', () => {
+          controller.toggleStatsVisibility();
+        });
+
+        return container;
+      }
+    });
+
+    // Add the control to the map
+    this.map.addControl(new InfoToggleControl());
+  }
+
+  toggleStatsVisibility() {
+    if (!this.statsControl) return;
+
+    // Get the stats control element
+    const statsElement = this.map.getContainer().querySelector('.leaflet-control-stats');
+    if (!statsElement) return;
+
+    // Toggle visibility
+    if (statsElement.style.display === 'none') {
+      statsElement.style.display = 'inline-block';
+    } else {
+      statsElement.style.display = 'none';
+    }
+  }
+
   toggleSettingsMenu() {
     // If the settings panel already exists, just show/hide it
     if (this.settingsPanel) {

app/javascript/maps/location_search.js

@@ -174,8 +174,6 @@ class LocationSearch {
         container.addEventListener('DOMMouseScroll', (e) => {
           e.stopPropagation();
         }, { passive: false });
-
-        console.log('LocationSearch: Added scroll prevention to container', container.id || 'search-bar');
       }
     });
   }

app/views/layouts/map.html.erb

@@ -38,7 +38,7 @@
     </div>
 
     <!-- Full Screen Map Container -->
-    <div class='absolute top-16 left-0 right-0 bottom-0 w-full z-10'>
+    <div class='absolute top-16 left-0 right-0 w-full z-20' style='height: calc(100vh - 4rem);'>
       <%= yield %>
     </div>
 

app/views/map/index.html.erb

@@ -1,13 +1,14 @@
 <% content_for :title, 'Map' %>
 
 <!-- Floating Date Navigation Controls -->
-<div class="top-20 left-4 right-4 z-30" data-controller="map-controls">
+<div class="fixed top-20 left-0 right-0 flex justify-center" style="z-index: 9999; padding-left: 80px; padding-right: 80px;">
+  <div style="width: 1500px; max-width: 100%;" data-controller="map-controls">
   <!-- Mobile: Compact Toggle Button -->
-  <div class="lg:hidden">
+  <div class="lg:hidden justify-center flex">
     <button
       type="button"
       data-action="click->map-controls#toggle"
-      class="btn btn-primary w-full shadow-lg">
+      class="btn btn-primary w-96 shadow-lg">
       <span data-map-controls-target="toggleIcon">
         <%= icon 'chevron-down' %>
       </span>
@@ -77,11 +78,12 @@
     <% end %>
   </div>
   </div>
+</div>
 
 <!-- Full Screen Map -->
 <div
   id='map'
-  class="w-full h-full"
+  class="absolute inset-0 w-full h-full z-0"
   data-controller="maps points add-visit family-members"
   data-points-target="map"
   data-api_key="<%= current_user.api_key %>"