fix: make sure iframe height stays in sync

lukexor · May 16, 2024 · ac3c545 · ac3c545
1 parent 35b4a4a
commit ac3c545
Showing 1 changed file with 22 additions and 1 deletion.
diff --git a/web/src/pages/tetanes-web.tsx b/web/src/pages/tetanes-web.tsx
@@ -2,8 +2,29 @@ import Layout from "components/layout";
 import indexCopy from "data/index.json";
 import tetanesCopy from "data/tetanes.json";
 import Head from "next/head";
+import { useEffect, useRef } from "react";
 
 export default function Tetanes() {
+  const ref = useRef<HTMLIFrameElement>(null);
+
+  // Super hacky way to keep the iframe height in sync with its content
+  useEffect(() => {
+    let timer = setInterval(() => {
+      const iframe = ref.current;
+      if (iframe && iframe.contentWindow) {
+        const newHeight =
+          iframe.contentWindow.document.body.scrollHeight + 200 + "px";
+        if (iframe.height !== newHeight) {
+          iframe.height = newHeight;
+        }
+      }
+    }, 1000);
+
+    return () => {
+      clearInterval(timer);
+    };
+  });
+
   return (
     <>
       <Head>
@@ -23,11 +44,11 @@ export default function Tetanes() {
       <Layout>
         <section>
           <iframe
+            ref={ref}
             title={tetanesCopy.title}
             src={tetanesCopy.url}
             frameBorder="0"
             width="100%"
-            height="1250px"
           ></iframe>
         </section>
       </Layout>