Update.

app.py

@@ -335,23 +335,25 @@ with blocks:
             with gr.Row(elem_id="landing-hero-row"):
                 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
-                programming and logical reasoning. <strong>Warmup</strong> and <strong>Tier&nbsp;1</strong> span moderate through
-                challenging problems, while <strong>Tier&nbsp;2</strong> is research-level.
-            </p>
-            </div>
-            """,
+        <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
+            programming and logical reasoning. <strong>Warmup</strong> and <strong>Tier&nbsp;1</strong> span moderate through
+            challenging problems, while <strong>Tier&nbsp;2</strong> is research-level.
+        </p>
+        </div>
+        """,
                     elem_classes="markdown-text",
                 )
-                learn_more_btn = gr.Button("Learn More", elem_id="learn-more-pill", variant="secondary")
+                learn_more_btn = gr.Button(
+                    "Learn More about FormulaOne", elem_id="learn-more-pill", variant="secondary"
+                )
 
-            # Switch to the "What is FormulaOne" tab when the pill is clicked
+            # Make the pill switch to the "What is FormulaOne" tab
             learn_more_btn.click(
-                lambda: gr.Tabs.update(selected="what-is"),
+                lambda: gr.Tabs(selected="what-is"),  # ← THIS actually changes the selected tab
                 inputs=None,
-                outputs=tabs,
+                outputs=tabs,  # tabs = the handle from `with gr.Tabs(...) as tabs:`
             )
 
             # Pill-style selector aligned to the top-right
@@ -391,7 +393,7 @@ with blocks:
             )
 
         # Existing "What is FormulaOne" tab
-        with gr.TabItem("What is FormulaOne", id=1, elem_id="what-is-tab"):
+        with gr.TabItem("What is FormulaOne", id="what-is", elem_id="what-is-tab"):
             gr.Image(
                 "assets/banner.png",
                 show_label=False,

src/display/css_html_js.py

@@ -72,7 +72,6 @@ custom_css = """
 }
 #learn-more-btn button:hover { text-decoration: underline !important; background: transparent !important; }
 
-/* Hero row: keep within 800px, space content, center vertically */
 #landing-hero-row {
   max-width: 800px;
   margin-left: auto;
@@ -82,18 +81,23 @@ custom_css = """
   align-items: center;
 }
 
-/* Compact blurb text */
+/* Blurb text */
 .f1-hero { margin: 0; font-size: 1.02rem; color: var(--f1-text); }
 
-/* Learn More pill (right) */
-#learn-more-pill, #learn-more-pill button {
+/* Learn More pill — compact width */
+#learn-more-pill,
+#learn-more-pill button {
+  width: auto !important;
+  min-width: 0 !important;
   background: #2563eb !important;
   color: #ffffff !important;
   border: 0 !important;
   border-radius: 999px !important;
-  padding: 8px 14px !important;
+  padding: 6px 12px !important;   /* narrower */
   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 */
 }
 #learn-more-pill button:hover { filter: brightness(0.95) !important; }