Update app.py

app.py

@@ -34,7 +34,7 @@ APP_DIR = os.getcwd()
 SESSION_FILE = "/tmp/forge_session.json"
 
 # Branding: fixed logo height
-LOGO_HEIGHT_PX = int(os.getenv("FORGE_LOGO_PX", 60))
+LOGO_HEIGHT_PX = int(os.getenv("FORGE_LOGO_PX", 50))
 
 # Settings live in a user cache dir (persists better than /tmp)
 CONFIG_DIR = os.path.expanduser("~/.cache/forgecaptions")
@@ -707,7 +707,7 @@ def _render_header_html(px: int) -> str:
     display: block;
     max-width: 320px; /* cap very wide logos */
   }}
-  @media (max-width: 640px) {{
+  @media (max-width: 500px) {{
     .cf-logo {{ height: {max(48, int(px) - 8)}px; }}
   }}
 </style>
@@ -915,7 +915,7 @@ with gr.Blocks(css=BASE_CSS, title="ForgeCaptions") as demo:
             gallery = gr.Gallery(
                 label="Results",
                 show_label=True,
-                columns=3,
+                columns=1,
                 elem_id="cfGal",
                 elem_classes=["cf-scroll"]
             )
@@ -949,43 +949,111 @@ with gr.Blocks(css=BASE_CSS, title="ForgeCaptions") as demo:
             export_txt_btn  = gr.Button("Export captions as .txt (zip)")
             txt_zip         = gr.File(label="TXT zip", visible=False)
 
-    # ---- Robust scroll sync
-    gr.HTML("""
 <script>
-(function () {
-  function findGal() {
-    const host = document.querySelector("#cfGal");
-    if (!host) return null;
-    return host.querySelector('[data-testid="gallery"]') || host;
+(() => {
+  // ---- Config: your wrapper IDs
+  const GAL_WRAP_SEL = "#cfGal";        // wrapper around the gallery
+  const TABLE_WRAP_SEL = "#cfTableWrap"; // wrapper around your table
+
+  // ---- Helpers
+  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
+
+  function findGalleryHost() {
+    const wrap = document.querySelector(GAL_WRAP_SEL);
+    if (!wrap) return null;
+    // Prefer explicit gallery node if present; otherwise use wrapper
+    return wrap.querySelector('[data-testid="gallery"], [data-testid="image-gallery"]') || wrap;
   }
-  function findTbl() { return document.querySelector("#cfTableWrap"); }
-  function syncScroll(a, b) {
-    if (!a || !b) return;
+
+  function findTableHost() {
+    return document.querySelector(TABLE_WRAP_SEL);
+  }
+
+  function setMaxHeights(gal, tab) {
+    const targetH = clamp(tab.clientHeight || 520, 360, 520);
+    gal.style.maxHeight = targetH + "px";
+    gal.style.overflowY = "auto";
+    tab.style.maxHeight = targetH + "px";
+    tab.style.overflowY = "auto";
+  }
+
+  function attachScrollSync(a, b) {
+    if (!a || !b) return () => {};
     let lock = false;
-    const onA = () => { if (lock) return; lock = true; b.scrollTop = a.scrollTop; lock = false; };
-    const onB = () => { if (lock) return; lock = true; a.scrollTop = b.scrollTop; lock = false; };
+
+    // Use scroll ratio so different scrollHeights stay aligned
+    const sync = (src, dst) => {
+      const maxSrc = Math.max(1, src.scrollHeight - src.clientHeight);
+      const r = src.scrollTop / maxSrc;
+      const maxDst = Math.max(1, dst.scrollHeight - dst.clientHeight);
+      const next = r * maxDst;
+      if (Math.abs(dst.scrollTop - next) > 1) {
+        dst.scrollTop = next;
+      }
+    };
+
+    const onA = () => { if (lock) return; lock = true; requestAnimationFrame(() => { sync(a, b); lock = false; }); };
+    const onB = () => { if (lock) return; lock = true; requestAnimationFrame(() => { sync(b, a); lock = false; }); };
+
     a.addEventListener("scroll", onA, { passive: true });
     b.addEventListener("scroll", onB, { passive: true });
+
+    // Return cleanup
+    return () => {
+      a.removeEventListener("scroll", onA);
+      b.removeEventListener("scroll", onB);
+    };
   }
-  let tries = 0;
-  const t = setInterval(() => {
-    tries++;
-    const gal = findGal();
-    const tab = findTbl();
-    if (gal && tab) {
-      const H = Math.min(520, Math.max(360, tab.clientHeight || 520));
-      gal.style.maxHeight = H + "px";
-      gal.style.overflowY = "auto";
-      tab.style.maxHeight = H + "px";
-      tab.style.overflowY = "auto";
-      syncScroll(gal, tab);
-      clearInterval(t);
+
+  let cleanupScroll = null;
+  let resizeObs = null;
+
+  function wireUp() {
+    const gal = findGalleryHost();
+    const tab = findTableHost();
+    if (!gal || !tab) return false;
+
+    // (Re)apply heights & listeners
+    setMaxHeights(gal, tab);
+    if (cleanupScroll) cleanupScroll();
+    cleanupScroll = attachScrollSync(gal, tab);
+
+    // Keep heights in sync on resize/content changes
+    if (resizeObs) resizeObs.disconnect();
+    resizeObs = new ResizeObserver(() => setMaxHeights(gal, tab));
+    resizeObs.observe(tab);
+    resizeObs.observe(gal);
+
+    return true;
+  }
+
+  // First attempt immediately (fast path)
+  if (wireUp()) return;
+
+  // Observe DOM for late mounts / Gradio re-renders
+  const mo = new MutationObserver(() => {
+    if (wireUp()) {
+      // Once wired, continue watching for *re-renders* to re-wire
+      // If you prefer, remove this `disconnect()` to keep watching forever
+      // but then you should also detect detach and clean up.
+      // Here we keep observing to handle re-renders:
     }
-    if (tries > 30) clearInterval(t);
-  }, 120);
+  });
+
+  mo.observe(document.documentElement || document.body, {
+    childList: true,
+    subtree: true,
+  });
+
+  // Optional: cleanup on page unload
+  window.addEventListener("beforeunload", () => {
+    mo.disconnect();
+    if (resizeObs) resizeObs.disconnect();
+    if (cleanupScroll) cleanupScroll();
+  });
 })();
 </script>
-""")
+
 
     # ---- Chunking logic
     def _split_chunks(files, csize: int):