updates on the dispatch page on the map gap on the right side

src/pages/nearle/dispatch/Dispatch.js

@@ -247,6 +247,24 @@ function CaptureMap({ targetRef }) {
   return null;
 }
 
+// Keeps Leaflet's internal canvas in sync with its container when the layout
+// changes (sidebar collapse/expand, Compare open/close). A flex/width change
+// doesn't fire a window resize, so without this the map's drawn area stays at
+// the old size and leaves a grey gutter at the right edge until the next
+// pan/zoom. We pulse invalidateSize across the sidebar's 0.32s CSS transition
+// so the map grows/shrinks smoothly with the container instead of snapping.
+function MapAutoResize({ trigger }) {
+  const map = useMap();
+  useEffect(() => {
+    const timers = [0, 60, 120, 200, 300, 380].map((t) =>
+      setTimeout(() => map.invalidateSize({ animate: false }), t)
+    );
+    return () => timers.forEach(clearTimeout);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [trigger, map]);
+  return null;
+}
+
 // Haversine distance between two [lat, lng] points in kilometers. Good to
 // ~0.1% across city scales; we use it to sum the length of an OSRM-snapped
 // polyline so the Compare delta panel can show "actual km" without depending
@@ -4500,6 +4518,7 @@ const Dispatch = ({
                 <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='&copy; OpenStreetMap contributors' />
                 <ZoomControl position="bottomright" />
                 {compareOpen && <CaptureMap targetRef={leftMapRef} />}
+                <MapAutoResize trigger={`${sidebarCollapsed}|${compareOpen}|${compareDataCollapsed}`} />
                 <MapController focusedItem={compareFocusItem || ((focusedRider || focusedKitchen) && focusedStop) || focusedRider || focusedKitchen || focusedZone} viewMode={viewMode} orders={allOrders} kitchens={kitchens} locationKey={selectedAppLocationId} />
                 {kitchens
                   .filter(k => Number.isFinite(k.lat) && Number.isFinite(k.lon))