💄 Optimized widget

src/pages/moments.astro

@@ -3,15 +3,15 @@ import RootLayout from "../layouts/RootLayout.astro";
 ---
 
 <RootLayout>
-  <iframe class="moments-frame" src="https://feed.smartsheep.studio/realms/1?embedded=yes" />
+  <iframe class="moments-frame" src="https://feed.smartsheep.studio/realms/1?embedded=yes"></iframe>
 </RootLayout>
 
 <style>
-    .moments-frame {
-        margin-top: 64px;
-        display: block;
-        border: 0;
-        width: 100vw;
-        height: calc(100vh - 64px);
-    }
+  .moments-frame {
+    margin-top: 64px;
+    display: block;
+    border: 0;
+    width: 100vw;
+    height: calc(100vh - 64px);
+  }
 </style>

src/pages/posts/[slug].astro

@@ -121,11 +121,9 @@ const embedOptions = new URLSearchParams({
     element.height = height ? `${height}px` : "360px";
   }
 
-  window.addEventListener("DOMContentLoaded", () => {
-    const element = document.querySelector<HTMLIFrameElement>("#interactive-iframe");
-    if (element) {
-      resizeInteractiveWidget(element);
-    }
+  const widget = document.querySelector<HTMLIFrameElement>("#interactive-iframe");
+  widget?.addEventListener("onload", () => {
+    resizeInteractiveWidget(widget);
   });
 </script>
 
@@ -152,4 +150,11 @@ const embedOptions = new URLSearchParams({
       grid-template-columns: 2fr 1fr;
     }
   }
+
+  #interactive-iframe {
+    display: block;
+    border: 0;
+    width: 100%;
+    min-height: 360px;
+  }
 </style>