Update app.py

app.py

@@ -599,9 +599,9 @@ def export_txt_zip(table_value: Any, dataset_name: str) -> str:
 def _render_header_html(auto: bool, px: int, scale: float) -> str:
     auto_js = "true" if auto else "false"
     return f"""
-<div class="cf-hero">
-  {logo_b64_img()}
-  <div class="cf-text">
+<div class="cf-hero" id="cfHero">
+  {logo_b64_img() or '<div class="cf-logo"></div>'}
+  <div class="cf-text" id="cfText">
     <h1 class="cf-title">ForgeCaptions</h1>
     <div class="cf-sub">Batch captioning</div>
     <div class="cf-sub">Scrollable editor & autosave</div>
@@ -610,37 +610,64 @@ def _render_header_html(auto: bool, px: int, scale: float) -> str:
 </div>
 <hr>
 <style>
-  .cf-logo {{ height: auto; width: auto; object-fit: contain; }}
+  /* Let the hero stretch to tallest child; we’ll force exact height via JS */
+  #cfHero {{ align-items: stretch; }}
+  .cf-logo {{
+    display: block;
+    width: auto;
+    height: auto;            /* JS will set explicit px height */
+    object-fit: contain;
+    max-height: 480px;       /* safety clamp */
+  }}
 </style>
 <script>
 (function() {{
-  const AUTO = {auto_js};
-  const PX = {int(px)};
+  const AUTO  = {auto_js};
+  const PX    = {int(px)};
   const SCALE = {float(scale)};
+
   function fit() {{
+    const hero = document.getElementById("cfHero");
+    const text = document.getElementById("cfText");
     const logo = document.querySelector(".cf-logo");
-    const text = document.querySelector(".cf-text");
-    if (!logo || !text) return;
-    if (AUTO) {{
-      const h = text.getBoundingClientRect().height || 180;
-      const target = Math.max(80, Math.min(420, Math.round(h * SCALE)));
-      logo.style.height = target + "px";
-    }} else {{
-      logo.style.height = Math.max(80, Math.min(420, PX)) + "px";
-    }}
+    if (!hero || !text || !logo) return;
+
+    // Include vertical margins so we truly match the whole text stack
+    const cs = getComputedStyle(text);
+    const rect = text.getBoundingClientRect();
+    const fullH = rect.height + parseFloat(cs.marginTop) + parseFloat(cs.marginBottom);
+
+    const target = AUTO
+      ? Math.max(80, Math.min(480, Math.round(fullH * SCALE)))
+      : Math.max(80, Math.min(480, PX));
+
+    hero.style.minHeight = target + "px";   // ensure the flex row is that tall
+    logo.style.height    = target + "px";   // logo matches exactly
+    logo.style.width     = "auto";          // preserve aspect ratio
   }}
-  const textNode = document.querySelector(".cf-text");
-  if (window.ResizeObserver && textNode) {{
-    const ro = new ResizeObserver(fit);
-    ro.observe(textNode);
+
+  // Recompute on font load, hydration, resizes, and text changes
+  if (document.fonts && document.fonts.ready) {{
+    document.fonts.ready.then(fit);
   }}
+  window.addEventListener("load", fit, {{ passive: true }});
   window.addEventListener("resize", fit, {{ passive: true }});
+
+  const textEl = document.getElementById("cfText");
+  if (window.ResizeObserver && textEl) {{
+    new ResizeObserver(fit).observe(textEl);
+  }}
+
+  // A couple of deferred passes to catch late reflows
   setTimeout(fit, 0);
+  setTimeout(fit, 200);
+  setTimeout(fit, 800);
 }})();
 </script>
 """
 
 
+
 # ------------------------------
 # 11) UI (Blocks)
 # ------------------------------
@@ -649,11 +676,17 @@ BASE_CSS = """
 .gradio-container{max-width:100%!important}
 
 /* Header */
-.cf-hero{display:flex; align-items:center; justify-content:center; gap:16px;
-  margin:4px 0 12px; text-align:center;}
-.cf-hero .cf-text{text-align:center;}
-.cf-title{margin:0;font-size:3.25rem;line-height:1;letter-spacing:.2px}
-.cf-sub{margin:6px 0 0;font-size:1.1rem;color:#cfd3da}
+.cf-hero{
+  display:flex;
+  align-items:stretch;     /* was center; stretch lets the logo fill the row */
+  justify-content:center;
+  gap:16px;
+  margin:4px 0 12px;
+  text-align:center;
+}
+.cf-hero .cf-text{ text-align:center; }
+.cf-title{ margin:0; font-size:3.25rem; line-height:1; letter-spacing:.2px; }
+.cf-sub{ margin:6px 0 0; font-size:1.1rem; color:#cfd3da; }
 
 /* Results area + robust scrollbars */
 .cf-scroll{border:1px solid #e6e6e6; border-radius:10px; padding:8px}