@biela.dev/core 1.7.7 → 1.7.9

package/dist/index.cjs

@@ -636,6 +636,20 @@ function DeviceFrame({
   react.useEffect(() => {
     onScaleChangeRef.current?.(activeScale);
   }, [activeScale]);
+  react.useEffect(() => {
+    const el = frameOverlayRef.current;
+    if (!el) return;
+    const svgs = el.querySelectorAll("svg");
+    svgs.forEach((svg) => {
+      if (!svg.getAttribute("viewBox")) {
+        const w = svg.getAttribute("width");
+        const h = svg.getAttribute("height");
+        if (w && h) svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
+      }
+      svg.setAttribute("width", "100%");
+      svg.setAttribute("height", "100%");
+    });
+  });
   const DeviceSVGComponent = svgEntry?.component;
   const hasMeasured = containerW > 0 && containerH > 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -703,36 +717,22 @@ function DeviceFrame({
                       children: /* @__PURE__ */ jsxRuntime.jsx(DeviceErrorBoundary, { children })
                     }
                   ),
-                  DeviceSVGComponent && /* @__PURE__ */ jsxRuntime.jsxs(
-                    "div",
+                  DeviceSVGComponent && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: frameOverlayRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    DeviceSVGComponent,
                     {
-                      ref: frameOverlayRef,
-                      className: "bielaframe-svg-overlay",
+                      colorScheme,
                       style: {
                         position: "absolute",
                         top: 0,
                         left: 0,
                         width: frameTotalW,
                         height: frameTotalH,
+                        overflow: "hidden",
                         pointerEvents: "none",
-                        zIndex: 10,
-                        overflow: "hidden"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: `.bielaframe-svg-overlay svg { width: 100% !important; height: 100% !important; }` } }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          DeviceSVGComponent,
-                          {
-                            colorScheme,
-                            style: {
-                              width: "100%",
-                              height: "100%"
-                            }
-                          }
-                        )
-                      ]
+                        zIndex: 10
+                      }
                     }
-                  ),
+                  ) }),
                   showSafeAreaOverlay && /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {