@biela.dev/core 1.7.4 → 1.7.6

package/dist/index.cjs

@@ -10,10 +10,17 @@ function useContainerSize(ref) {
   react.useEffect(() => {
     const el = ref.current;
     if (!el) return;
-    const observer = new ResizeObserver(([entry]) => {
-      if (!entry) return;
-      let { width, height } = entry.contentRect;
+    const update = () => {
+      const rect = el.getBoundingClientRect();
+      let width = rect.width;
+      let height = rect.height;
       if (typeof window !== "undefined") {
+        if (height <= 0) {
+          height = Math.max(200, window.innerHeight - Math.max(0, rect.top));
+        }
+        if (width <= 0) {
+          width = window.innerWidth;
+        }
         width = Math.min(width, window.innerWidth);
         height = Math.min(height, window.innerHeight);
       }
@@ -21,9 +28,15 @@ function useContainerSize(ref) {
         if (prev.width === width && prev.height === height) return prev;
         return { width, height };
       });
-    });
+    };
+    const observer = new ResizeObserver(() => update());
     observer.observe(el);
-    return () => observer.disconnect();
+    update();
+    window.addEventListener("resize", update);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", update);
+    };
   }, [ref]);
   return size;
 }
@@ -632,9 +645,8 @@ function DeviceFrame({
       className: "bielaframe-sentinel",
       style: {
         width: "100%",
-        height: "100%",
+        height: containerH > 0 ? containerH : "100%",
         minHeight: 0,
-        maxHeight: "100%",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",