Little arrow button to take you back up (#24)

content.py

@@ -407,6 +407,26 @@ span.wrap[tabindex="0"][role="button"][data-editable="false"] {
     grid-row: 2 !important;
     grid-column: 1 / -1 !important;
 }
+.benchmark-header {
+    display: flex !important;
+    align-items: center !important;
+    gap: 20px !important;
+}
+#scroll-up-button {
+    flex-grow: 0;
+    display: flex;
+    color: #032629;
+    background-color: #faf2e9;
+    align-items: flex-end;
+    height: 57px;
+    padding: 0px;
+    padding-bottom: 2px;
+    min-width: 50px;
+}
+.dark #scroll-up-button {
+    color: #faf2e9;
+    background-color: #032629;
+}
 /*------ Submission Page CSS ------*/
 #custom-form-group {
     border: 1px solid #000 !important; 
@@ -432,5 +452,4 @@ span.wrap[tabindex="0"][role="button"][data-editable="false"] {
 .styler {
     background: none;
 }
-
 """

ui_components.py

@@ -375,10 +375,17 @@ def create_benchmark_details_display(
 
     gr.Markdown("---")
     gr.Markdown("## Detailed Benchmark Results")
-
+    scroll_to_top_js = "() => { window.scrollTo({top: 0, behavior: 'smooth'}); }"
     # 2. Loop through each benchmark and create its UI components
     for benchmark_name in benchmark_names:
-        gr.Markdown(f"### {benchmark_name} Leaderboard", header_links=True)
+        with gr.Row(elem_classes=["benchmark-header"]):
+            gr.Markdown(f"### {benchmark_name} Leaderboard", header_links=True)
+            scroll_up_button = gr.Button(
+                value="⬆",
+                elem_id="scroll-up-button",
+            )
+            # When the button is clicked, it runs our JavaScript function. No Python needed.
+            scroll_up_button.click(fn=None, js=scroll_to_top_js)
 
         # 3. Prepare the data for this specific benchmark's table and plot
         benchmark_score_col = f"{benchmark_name} Score"