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,7 +265,7 @@ function renderIframe(rel) {
       const doc = iframe.contentDocument;
       const style = doc.createElement("style");
       style.textContent = `
-  html,body{
+      html,body {
         background:#0b0b0b;
         color:#e6e3d7;
         font-family:Inter,sans-serif;
@@ -273,25 +273,40 @@ function renderIframe(rel) {
         padding:3vh 6vw;
         line-height:1.8;
       }
-  body{
+      body {
         display:flex;
         flex-direction:column;
         align-items:center;
         justify-content:flex-start;
         min-height:100vh;
       }
-  *{
+      * {
         max-width:960px;
         width:100%;
       }
-  img,video,iframe{
+      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;
   }
 }