From 7535e41ad377ecdc7dde087548b6f8cb34b9f38c Mon Sep 17 00:00:00 2001
From: Brian Keating <brian.keating@enverus.com>
Date: Wed, 4 Feb 2026 10:28:24 +0000
Subject: [PATCH] fix: add map resize handling when panel visibility changes

Add Leaflet invalidateSize() call when left/right sidebars are toggled
to ensure the map properly recalculates its container dimensions.

This completes the panel visibility feature by:
- Adding leftSidebarVisible and rightSidebarVisible props to WorldMap
- Calling map.invalidateSize() with a small delay when visibility changes
- Passing sidebar visibility state from App.jsx to WorldMap

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/App.jsx                 |  2 ++
 src/components/WorldMap.jsx | 50 ++++++++++++++++++++++++-------------
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 73fbf66..64eebd7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -872,6 +872,8 @@ const App = () => {
             showWSJTX={mapLayers.showWSJTX}
             onToggleSatellites={toggleSatellites}
             hoveredSpot={hoveredSpot}
+            leftSidebarVisible={leftSidebarVisible}
+            rightSidebarVisible={rightSidebarVisible}
           />
           <div style={{ 
             position: 'absolute', 
diff --git a/src/components/WorldMap.jsx b/src/components/WorldMap.jsx
index f1c3df5..eb048bb 100644
--- a/src/components/WorldMap.jsx
+++ b/src/components/WorldMap.jsx
@@ -18,26 +18,28 @@ import PluginLayer from './PluginLayer.jsx';
 import { DXNewsTicker } from './DXNewsTicker.jsx';
 
 
-export const WorldMap = ({ 
-  deLocation, 
-  dxLocation, 
-  onDXChange, 
-  potaSpots, 
-  mySpots, 
-  dxPaths, 
-  dxFilters, 
-  satellites, 
+export const WorldMap = ({
+  deLocation,
+  dxLocation,
+  onDXChange,
+  potaSpots,
+  mySpots,
+  dxPaths,
+  dxFilters,
+  satellites,
   pskReporterSpots,
   wsjtxSpots,
-  showDXPaths, 
-  showDXLabels, 
-  onToggleDXLabels, 
-  showPOTA, 
-  showSatellites, 
+  showDXPaths,
+  showDXLabels,
+  onToggleDXLabels,
+  showPOTA,
+  showSatellites,
   showPSKReporter,
   showWSJTX,
-  onToggleSatellites, 
-  hoveredSpot 
+  onToggleSatellites,
+  hoveredSpot,
+  leftSidebarVisible,
+  rightSidebarVisible
 }) => {
   const mapRef = useRef(null);
   const mapInstanceRef = useRef(null);
@@ -172,7 +174,7 @@ export const WorldMap = ({
   // Update tile layer when style changes
   useEffect(() => {
     if (!mapInstanceRef.current || !tileLayerRef.current) return;
-    
+
     mapInstanceRef.current.removeLayer(tileLayerRef.current);
     tileLayerRef.current = L.tileLayer(MAP_STYLES[mapStyle].url, {
       attribution: MAP_STYLES[mapStyle].attribution,
@@ -180,13 +182,25 @@ export const WorldMap = ({
       crossOrigin: 'anonymous',
       bounds: [[-85, -180], [85, 180]]
     }).addTo(mapInstanceRef.current);
-    
+
     // Ensure terminator is on top
     if (terminatorRef.current) {
       terminatorRef.current.bringToFront();
     }
   }, [mapStyle]);
 
+  // Invalidate map size when sidebars are toggled
+  // This ensures Leaflet recalculates the container dimensions
+  useEffect(() => {
+    if (!mapInstanceRef.current) return;
+    const timer = setTimeout(() => {
+      if (mapInstanceRef.current) {
+        mapInstanceRef.current.invalidateSize();
+      }
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [leftSidebarVisible, rightSidebarVisible]);
+
   // Countries overlay for "Countries" map style
   useEffect(() => {
     if (!mapInstanceRef.current) return;