Fix Sub-Navigation Bar (#8)

app.py

@@ -16,6 +16,21 @@ PROJECT_NAME = "asta-bench" + ("-internal" if IS_INTERNAL else "")
 LEADERBOARD_PATH = f"{OWNER}/{PROJECT_NAME}-leaderboard"
 api = HfApi()
 LOGO_PATH = "assets/logo.svg"
+#    This function will be available on ALL pages of your app.
+scroll_script = """
+<script>
+function scroll_to_element(id) {
+    console.log("Global scroll_to_element called for ID:", id);
+    const element = document.querySelector('#' + id);
+    if (element) {
+        console.log("Element found:", element);
+        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    } else {
+        console.error("Error: Element with ID '" + id + "' not found in the document.");
+    }
+}
+</script>
+"""
 
 
 
@@ -75,7 +90,7 @@ def render_logo():
         elem_id="logo-image"
     )
 # --- Gradio App Definition ---
-demo = gr.Blocks(theme=theme, css=css)
+demo = gr.Blocks(theme=theme, css=css, head=scroll_script)
 with demo:
     render_logo()
     main_page.demo.render()

content.py

@@ -209,16 +209,31 @@ nav.svelte-ti537g.svelte-ti537g {
 .dark block.svelte-1svsvh2 {
     background: #032629 !important;
 }
-.sub-nav-bar {
-    margin-bottom: 20px; /* The space below the nav bar */
+.padding.svelte-phx28p {
+    padding: 0 !important;
+}
+.dark .sub-nav-link-button {
+    color: #0fcb8c !important;
+}
+.sub-nav-bar-container {
+    display: flex !important;
+    flex-wrap: nowrap !important; 
+    align-items: center !important; 
+    gap: 20px !important;
 }
-.sub-nav-bar a {
+.sub-nav-link-button {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font-family: inherit;
     font-size: 16px;
-    border-radius: 5px;
-    transition: background-color 0.2s;
-    padding-right: 15px;
+    color: #F263A6; 
+    text-decoration: none;
+    cursor: pointer;
+    white-space: nowrap;
 }
-.padding.svelte-phx28p {
-    padding: 0 !important;
+.sub-nav-link-button:hover {
+    text-decoration: underline;
 }
 """

leaderboard_transformer.py

@@ -19,6 +19,7 @@ INFORMAL_TO_FORMAL_NAME_MAP = {
     "sqa_dev": "Sqa Dev",
     "litqa2_validation": "Litqa2 Validation",
     "paper_finder_validation": "Paper Finder Validation",
+    "paper_finder_litqa2_validation": "Paper Finder Litqa2 Validation",
     "discoverybench_validation": "Discoverybench Validation",
     "core_bench_validation": "Core Bench Validation",
     "ds1000_validation": "DS1000 Validation",

ui_components.py

@@ -247,22 +247,42 @@ def create_gradio_anchor_id(text: str) -> str:
     return f"h-{text}-leaderboard"
 def create_sub_navigation_bar(tag_map: dict, category_name: str):
     """
-    Generates and renders the HTML for the anchor-link sub-navigation bar.
+    Builds the entire sub-navigation bar as a single, self-contained HTML component.
+    This bypasses Gradio's layout components, giving us full control.
     """
     benchmark_names = tag_map.get(category_name, [])
     if not benchmark_names:
-        return # Do nothing if there are no benchmarks
+        # Return an empty HTML component to prevent errors
+        return gr.HTML()
 
-    anchor_links = []
+    # Start building the list of HTML button elements as strings
+    html_buttons = []
     for name in benchmark_names:
-        # Use the helper function to create the correct ID format
         target_id = create_gradio_anchor_id(name)
-        anchor_links.append(f"<a href='#{target_id}'>{name}</a>")
 
-    nav_bar_html = f"<div class='sub-nav-bar'>{'   '.join(anchor_links)}</div>"
+        # Create a standard HTML button.
+        # The onclick attribute calls our global JS function directly.
+        # Note the mix of double and single quotes.
+        button_str = f"""
+            <button
+                class="sub-nav-link-button"
+                onclick="scroll_to_element('{target_id}')"
+            >
+                {name}
+            </button>
+        """
+        html_buttons.append(button_str)
+
+    # Join the button strings and wrap them in a single div container
+    # This container will be our flexbox row.
+    full_html = f"""
+        <div class="sub-nav-bar-container">
+            {''.join(html_buttons)}
+        </div>
+    """
 
-    # Use gr.HTML to render the links correctly
-    gr.HTML(nav_bar_html)
+    # Return the entire navigation bar as one single Gradio HTML component
+    return gr.HTML(full_html)
 
 # # --- Detailed Benchmark Display ---
 def create_benchmark_details_display(