From 6489012e8faafbf4ba0167d51d1bf363b0b87555 Mon Sep 17 00:00:00 2001 From: Viktor Barzin Date: Sun, 15 Feb 2026 15:27:51 +0000 Subject: [PATCH] Auto-pan map to keep popup fully visible in viewport When a property popup opens near the edge of the map, the map now automatically pans so the entire popup is visible with 20px padding. --- frontend/src/components/Map.tsx | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/frontend/src/components/Map.tsx b/frontend/src/components/Map.tsx index bc10edd..751b12e 100644 --- a/frontend/src/components/Map.tsx +++ b/frontend/src/components/Map.tsx @@ -381,6 +381,26 @@ export function Map(props: MapProps) { .setMaxWidth("450px") .addTo(mapRef.current); popup.on('close', () => root.unmount()); + + // Pan map to ensure popup is fully visible + requestAnimationFrame(() => { + const popupEl = popup.getElement(); + if (!popupEl || !mapRef.current) return; + const popupRect = popupEl.getBoundingClientRect(); + const mapRect = mapRef.current.getContainer().getBoundingClientRect(); + const padding = 20; + let dx = 0, dy = 0; + if (popupRect.left < mapRect.left + padding) + dx = popupRect.left - mapRect.left - padding; + if (popupRect.right > mapRect.right - padding) + dx = popupRect.right - mapRect.right + padding; + if (popupRect.top < mapRect.top + padding) + dy = popupRect.top - mapRect.top - padding; + if (popupRect.bottom > mapRect.bottom - padding) + dy = popupRect.bottom - mapRect.bottom + padding; + if (dx !== 0 || dy !== 0) + mapRef.current.panBy([dx, dy], { duration: 300 }); + }); } }