@page-speed/maps 0.1.6 → 0.1.8

package/dist/components/index.cjs

@@ -587,11 +587,52 @@ function MapLibre({
     }
     return getMapLibreStyleUrl("osm-bright", stadiaApiKey);
   }, [mapStyle, stadiaApiKey, styleUrl]);
+  const containerRef = React3__namespace.default.useRef(null);
+  React3__namespace.default.useEffect(() => {
+    if (!mapRef.current || !containerRef.current) return;
+    const enforceContainerHeight = () => {
+      const container = containerRef.current;
+      const map = mapRef.current;
+      if (!container || !map) return;
+      const rect = container.getBoundingClientRect();
+      const maxHeight = Math.min(rect.height, window.innerHeight);
+      const canvas = map.getCanvas();
+      if (canvas && canvas.style.height) {
+        const canvasHeight = parseInt(canvas.style.height);
+        if (canvasHeight > maxHeight || canvasHeight > 2e3) {
+          map.resize();
+        }
+      }
+    };
+    const interval = setInterval(enforceContainerHeight, 1e3);
+    let resizeObserver = null;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => {
+        enforceContainerHeight();
+      });
+      resizeObserver.observe(containerRef.current);
+    }
+    return () => {
+      clearInterval(interval);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ref: containerRef,
       className: joinClassNames("relative w-full h-full", className),
-      style: { width: "100%", height: "100%", ...style },
+      style: {
+        width: "100%",
+        height: "100%",
+        maxHeight: "100vh",
+        // Prevent excessive height
+        overflow: "hidden",
+        position: "relative",
+        ...style
+      },
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         maplibre.Map,
         {
@@ -1190,7 +1231,7 @@ function GeoMap({
         "div",
         {
           className: cn(
-            "relative w-[320px] overflow-hidden rounded-xl border border-border bg-card text-card-foreground shadow-2xl",
+            "relative w-80 overflow-hidden rounded-xl border border-border bg-card text-card-foreground shadow-2xl",
             panelClassName
           ),
           children: [
@@ -1264,7 +1305,7 @@ function GeoMap({
         "div",
         {
           className: cn(
-            "relative w-[320px] overflow-hidden rounded-xl border border-border bg-card text-card-foreground p-4 shadow-2xl",
+            "relative w-80 overflow-hidden rounded-xl border border-border bg-card text-card-foreground p-4 shadow-2xl",
             panelClassName
           ),
           children: [
@@ -1310,32 +1351,50 @@ function GeoMap({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-[520px] w-full", mapWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-          MapLibre,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            stadiaApiKey,
-            mapStyle,
-            styleUrl,
-            mapLibreCssHref,
-            viewState: resolvedViewState,
-            onViewStateChange: applyViewState,
-            markers: mapMarkers,
-            onClick: (coord) => {
-              onMapClick?.(coord);
-              if (clearSelectionOnMapClick) {
-                clearSelection();
-              }
+            className: cn(
+              "w-full",
+              // Default height, can be overridden by mapWrapperClassName
+              mapWrapperClassName || "h-[520px]"
+            ),
+            style: {
+              // CRITICAL: Always use explicit height to prevent MapLibre canvas expansion
+              height: mapWrapperClassName ? void 0 : "520px",
+              maxHeight: "100vh",
+              // Prevent excessive growth
+              position: "relative",
+              overflow: "hidden"
             },
-            onMarkerDrag,
-            showNavigationControl,
-            showGeolocateControl,
-            navigationControlPosition,
-            geolocateControlPosition,
-            flyToOptions,
-            className: cn("h-full w-full", mapClassName),
-            children: mapChildren
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              MapLibre,
+              {
+                stadiaApiKey,
+                mapStyle,
+                styleUrl,
+                mapLibreCssHref,
+                viewState: resolvedViewState,
+                onViewStateChange: applyViewState,
+                markers: mapMarkers,
+                onClick: (coord) => {
+                  onMapClick?.(coord);
+                  if (clearSelectionOnMapClick) {
+                    clearSelection();
+                  }
+                },
+                onMarkerDrag,
+                showNavigationControl,
+                showGeolocateControl,
+                navigationControlPosition,
+                geolocateControlPosition,
+                flyToOptions,
+                className: cn("h-full w-full", mapClassName),
+                children: mapChildren
+              }
+            )
           }
-        ) }),
+        ),
         selection.type !== "none" ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {