fix iframe scrolling in edit

reader/src/ResourcePage.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useRef, useState, useEffect, useMemo } from "react";
 import { marked } from "marked";
 import { toast } from "react-toastify";
 import { useStore } from "./store.js";
@@ -111,6 +111,9 @@ function useFileContent(resource) {
 }
 
 const ResourcePage = ({ topics }) => {
+  // Iframe
+  const iframeRef = useRef(null);
+
   // Config + Token
   const authToken = useStore((state) => state.config.token);
   const changeConfig = useStore((state) => state.changeConfig);
@@ -154,7 +157,8 @@ const ResourcePage = ({ topics }) => {
                   -webkit-font-smoothing: antialiased;
                   -moz-osx-font-smoothing: grayscale;
                   margin: 0;
-                  padding: 0 12px 40px;
+                  padding: 0;
+                  overflow: hidden;
                 }
               </style>
             </head>
@@ -166,6 +170,19 @@ const ResourcePage = ({ topics }) => {
     return fileContent;
   }, [content]);
 
+  const handleLoad = () => {
+    const iframe = iframeRef.current;
+    if (iframe) {
+      try {
+        // Only works for same-origin content
+        const contentHeight = iframe.contentDocument.body.scrollHeight;
+        iframe.style.height = contentHeight + "px";
+      } catch (error) {
+        console.log("Cross-origin iframe - cannot access content height");
+      }
+    }
+  };
+
   const handleTokenSubmit = () => {
     if (tokenInput.trim()) {
       setAuthToken(tokenInput);
@@ -295,9 +312,11 @@ const ResourcePage = ({ topics }) => {
             }}
           />
           <iframe
+            ref={iframeRef}
+            onLoad={handleLoad}
             srcDoc={htmlContent}
             title="MD Content"
-            className="flex-1 min-h-full"
+            className="flex-1 min-h-full border-none p-4"
             allow="fullscreen"
           />
         </div>