v3.0.4 – Adaptive Frame of Stillness

Dynamic iframe resizing via postMessage handshake.
Perfect centering restored. Infinite recursion made visible.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "the-fold-within",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "dependencies": {
     "pdf-parse": "^1.1.1"
   }

public/app.js

@@ -265,33 +265,48 @@ function renderIframe(rel) {
       const doc = iframe.contentDocument;
       const style = doc.createElement("style");
       style.textContent = `
-  html,body{
-    background:#0b0b0b;
-    color:#e6e3d7;
-    font-family:Inter,sans-serif;
-    margin:0;
-    padding:3vh 6vw;
-    line-height:1.8;
-  }
-  body{
-    display:flex;
-    flex-direction:column;
-    align-items:center;
-    justify-content:flex-start;
-    min-height:100vh;
-  }
-  *{
-    max-width:960px;
-    width:100%;
-  }
-  img,video,iframe{
-    max-width:100%;
-    height:auto;
-    border-radius:8px;
-  }
-`;
+      html,body {
+        background:#0b0b0b;
+        color:#e6e3d7;
+        font-family:Inter,sans-serif;
+        margin:0;
+        padding:3vh 6vw;
+        line-height:1.8;
+      }
+      body {
+        display:flex;
+        flex-direction:column;
+        align-items:center;
+        justify-content:flex-start;
+        min-height:100vh;
+      }
+      * {
+        max-width:960px;
+        width:100%;
+      }
+      img,video,iframe {
+        max-width:100%;
+        height:auto;
+        border-radius:8px;
+      }
+      /* remove internal scrollbars */
+      html { overflow:hidden; }
+    `;
       doc.head.appendChild(style);
-    } catch {}
+
+      // Inject auto-height script
+      const script = doc.createElement("script");
+      script.textContent = `
+        function sendHeight() {
+          window.parent.postMessage({ type: 'resizeFrame', height: document.body.scrollHeight }, '*');
+        }
+        new ResizeObserver(sendHeight).observe(document.body);
+        window.addEventListener('load', sendHeight);
+      `;
+      doc.body.appendChild(script);
+    } catch (e) {
+      console.warn("iframe load error", e);
+    }
   };
 }
 
@@ -306,4 +321,13 @@ function renderDefault() {
   }
 }
 
+window.addEventListener("message", e => {
+  if (e.data?.type === "resizeFrame") {
+    const iframe = document.querySelector("iframe[src*='" + location.hash.replace(/^#\//, "") + "']");
+    if (iframe) {
+      iframe.style.height = e.data.height + "px";
+    }
+  }
+});
+
 init();

public/styles.css

@@ -212,22 +212,21 @@ body.sidebar-open #sidebar { transform: translateX(0); }
 }
 
 .viewer iframe {
+  display: block;
   width: 100%;
   max-width: 960px;
-  height: calc(100vh - var(--topbar-h) - var(--subnav-h) - 120px);
   min-height: 500px;
   border: 0;
   border-radius: var(--radius);
   background: #0b0b0b;
   box-shadow: 0 0 30px rgba(0,0,0,0.6);
-  margin: 0 auto;
-  transition: all .4s ease;
+  margin: 0 auto 3rem auto;
+  transition: height .4s ease, transform .4s ease;
 }
 
 @media (max-width: 768px) {
   .viewer iframe {
     max-width: 100%;
-    height: calc(100vh - var(--topbar-h) - var(--subnav-h) - 80px);
     border-radius: 0;
   }
 }