Open the upload dialog around its button

On huggingface.co the app sits in an iframe as tall as the page, which the Hub's page
scrolls: a dialog centred on the iframe's viewport opened mid-page, often off screen.
It now opens around the "Upload my own CSV" button, where the visitor is looking,
kept within the viewport; the backdrop still covers the page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app.py

@@ -934,6 +934,18 @@ def palette(ink, panel, line, text, muted, focus):
 
 # Dark by default, whatever the viewer's system; light with ?__theme=light or the header's
 # toggle, whose last choice the browser remembers.
+# Where the upload dialog's card opens: around the Upload button, which then sits near
+# the card's middle, kept within the viewport (on huggingface.co, the whole page).
+PLACE_UPLOAD_JS = """
+() => {
+  const button = document.querySelector(".upload-open");
+  const top = button ? button.getBoundingClientRect().top - 200 : 80;
+  const room = window.innerHeight - 560;  // the card is about 540 px tall
+  const y = Math.max(16, Math.min(top, room));
+  document.documentElement.style.setProperty("--upload-top", `${y}px`);
+}
+"""
+
 THEME_JS = """
 () => {
   const KEY = "seldon-demo-theme";
@@ -1015,6 +1027,11 @@ with gr.Blocks(title="Seldon · Neuralk") as demo:
 
     results = [compare, confusions, predictions]
     page = [preview, target, shape, test_size, seldon_card, autogluon_card, *results]
+    # The dialog opens level with the button, where the visitor is looking. On
+    # huggingface.co the page sits in an iframe as tall as the page itself, which the
+    # Hub's page scrolls: the iframe's viewport, which a centred dialog would centre on,
+    # is the whole page, and its scroll is out of the page's reach.
+    upload_button.click(None, None, None, js=PLACE_UPLOAD_JS)
     upload_button.click(open_upload, None, upload_modal, api_name=False, queue=False)
     cancel_button.click(close_upload, None, [upload_modal, file], api_name=False, queue=False)
     # An upload joins the list and is chosen, which changes the source and shows it.

static/style.css

@@ -541,10 +541,11 @@
   max-width: none !important;
   height: 100vh;
   margin: 0 !important;
-  padding: 24px !important;
+  padding: var(--upload-top, 15vh) 24px 24px !important;  /* set on opening, by the button */
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column !important;  /* a Gradio column: the card, from the top down */
+  justify-content: flex-start !important;
+  align-items: center !important;
   background: rgba(8, 7, 14, 0.62) !important;
   backdrop-filter: blur(4px);
 }