Update.

app.py

@@ -280,7 +280,13 @@ def build_accuracy_figure(tier: str):
         template="plotly_white",
         height=420,
         margin=dict(l=30, r=120, t=10, b=40),  # extra right room for legend
-        xaxis=dict(title=None, type="date", tickformat="%b %Y", showgrid=True),
+        xaxis=dict(
+            title="Model Release Date",
+            type="date",
+            tickformat="%b %Y",
+            showgrid=True,
+            title_standoff=10,  # small gap so the label doesn’t crowd the ticks
+        ),
         yaxis=dict(
             title="Accuracy (%)",
             range=[0, 100],  # fixed 0–100
@@ -333,8 +339,9 @@ with blocks:
                 '<header class="text-center mb-12"><h1 class="text-4xl md:text-5xl font-bold text-gray-900 f1-h1">FormulaOne</h1></header>'
             )
             with gr.Row(elem_id="landing-hero-row"):
-                gr.Markdown(
-                    """
+                with gr.Column(scale=7, elem_id="landing-hero-left"):
+                    gr.Markdown(
+                        """
         <div class="f1-container">
         <p class="f1-hero">
             A benchmark of <strong>220</strong> novel, expert-level algorithmic problems over graphs that demand deep dynamic
@@ -343,19 +350,21 @@ with blocks:
         </p>
         </div>
         """,
-                    elem_classes="markdown-text",
-                )
-                learn_more_btn = gr.Button(
-                    "Learn More about FormulaOne", elem_id="learn-more-pill", variant="secondary"
-                )
+                        elem_classes="markdown-text",
+                    )
+                with gr.Column(scale=3, elem_id="landing-hero-right"):
+                    learn_more_btn = gr.Button(
+                        "Learn More about FormulaOne",
+                        elem_id="learn-more-pill",
+                        variant="secondary",
+                    )
 
             # Make the pill switch to the "What is FormulaOne" tab
             learn_more_btn.click(
-                lambda: gr.Tabs(selected="what-is"),  # ← THIS actually changes the selected tab
+                lambda: gr.Tabs(selected="what-is"),  # switches tabs
                 inputs=None,
-                outputs=tabs,  # tabs = the handle from `with gr.Tabs(...) as tabs:`
+                outputs=tabs,  # 'tabs' is your Tabs handle
             )
-
             # Pill-style selector aligned to the top-right
             with gr.Row(elem_id="f1-tier-select-row"):
                 tier_selector = gr.Radio(

src/display/css_html_js.py

@@ -77,14 +77,15 @@ custom_css = """
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 8px;
-  justify-content: space-between;
   align-items: center;
 }
+#landing-hero-left { padding-right: 8px; }
+#landing-hero-right { display: flex; justify-content: flex-end; }
 
 /* Blurb text */
 .f1-hero { margin: 0; font-size: 1.02rem; color: var(--f1-text); }
 
-/* Learn More pill — compact width */
+/* Learn More pill — compact */
 #learn-more-pill,
 #learn-more-pill button {
   width: auto !important;
@@ -93,11 +94,11 @@ custom_css = """
   color: #ffffff !important;
   border: 0 !important;
   border-radius: 999px !important;
-  padding: 6px 12px !important;   /* narrower */
+  padding: 6px 12px !important;
   box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
   font-weight: 700 !important;
-  font-size: 0.95rem !important;  /* slightly smaller text = smaller pill */
-  white-space: nowrap !important; /* keep on one line */
+  font-size: 0.95rem !important;
+  white-space: nowrap !important;
 }
 #learn-more-pill button:hover { filter: brightness(0.95) !important; }