Fix logo placement and iframe-resizer infinite-scroll on Spaces

app.py

@@ -192,15 +192,14 @@ html, body { margin: 0 !important; padding: 0 !important; overflow: hidden !impo
 gradio-app { display: block !important; position: fixed !important; inset: 0 !important; }
 footer { display: none !important; }
 
-/* Header overlay — sits above the main split, doesn't take vertical space. */
-#header { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
-          z-index: 10 !important; display: flex !important; align-items: center !important;
-          justify-content: space-between !important; padding: 8px 12px !important;
-          gap: 8px !important; pointer-events: none !important; }
-#header > * { pointer-events: auto !important; }
-#logo, #logo img { height: 40px !important; width: auto !important; max-width: 40px !important;
-                   object-fit: contain !important; }
-#logo { background: transparent !important; border: 0 !important; padding: 0 !important; flex: 0 0 auto !important; }
+/* Header bar — fixed-height row sitting in normal flow above the main split. */
+#header-bar { flex: 0 0 auto !important; display: flex !important; align-items: center !important;
+              justify-content: space-between !important; padding: 8px 16px !important;
+              gap: 12px !important; margin: 0 !important; min-height: 0 !important;
+              border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
+#logo { background: transparent !important; border: 0 !important; padding: 0 !important;
+        flex: 0 0 auto !important; min-width: 0 !important; }
+#logo, #logo img { height: 48px !important; width: auto !important; object-fit: contain !important; }
 #pro-cta a { display: inline-block; padding: 6px 12px; border-radius: 999px;
              background: linear-gradient(90deg,#ff9500,#34c759); color: #111 !important;
              font-weight: 600; font-size: 13px; text-decoration: none; }
@@ -217,8 +216,10 @@ footer { display: none !important; }
 #login-modal p { margin: 0 0 16px 0; opacity: 0.8; font-size: 14px; }
 
 .gradio-container { height: 100% !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; min-height: 0 !important; }
-.gradio-container .main, .gradio-container .wrap, .gradio-container .contain { height: 100% !important; padding: 0 !important; margin: 0 !important; max-width: 100% !important; min-height: 0 !important; }
-#main-row { height: 100% !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; flex-wrap: nowrap !important; min-height: 0 !important; }
+/* Make the immediate Gradio wrapper a flex column so #header-bar sits at the
+   top at its natural height and #main-row consumes the remaining space. */
+.gradio-container .main, .gradio-container .wrap, .gradio-container .contain { height: 100% !important; padding: 0 !important; margin: 0 !important; max-width: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; }
+#main-row { flex: 1 1 auto !important; height: auto !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; flex-wrap: nowrap !important; min-height: 0 !important; }
 #left-col, #right-col { height: 100% !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; min-height: 0 !important; }
 #left-col > *, #right-col > * { border-radius: 0 !important; }
 #point-plot, #point-plot > div, #point-plot .js-plotly-plot, #point-plot .plot-container { height: 100% !important; width: 100% !important; }
@@ -298,16 +299,17 @@ with gr.Blocks(title="File Point Cloud", fill_height=True) as demo:
         skip_btn = gr.Button("Continue without logging in", variant="secondary", size="sm")
     skip_btn.click(lambda: gr.update(visible=False), outputs=[login_modal])
 
-    # Header overlay: logo (top-left) + Pro CTA (top-right). Absolutely
-    # positioned via CSS so it doesn't interfere with the 50/50 split below.
-    with gr.Row(elem_id="header"):
+    # Header bar: logo (left) + Pro CTA (right). Sits in normal flow above the
+    # main split as a fixed-height row; the CSS makes the Gradio wrapper a
+    # flex column so #main-row gets the remaining height.
+    with gr.Row(elem_id="header-bar"):
         # height/width are set on the component itself (not just via CSS) so the
-        # logo renders at 40×40 from the first paint. Otherwise gr.Image briefly
-        # shows at default size until the injected <style> block applies and
-        # shrinks it — the "logo flashes big then becomes tiny" bug.
+        # logo renders at the final size from the first paint. Otherwise gr.Image
+        # briefly shows at default size until the injected <style> block applies
+        # — the "logo flashes big then becomes tiny" bug.
         gr.Image(
             value="logo.png", elem_id="logo", show_label=False, container=False,
-            interactive=False, buttons=[], height=40, width=40,
+            interactive=False, buttons=[], height=48, width=48,
         )
         # Pro CTA — hidden by default, shown on .load() if the user is logged in
         # but lacks Pro. For the placeholder it just links out to the upgrade page.