Update.

app.py

@@ -214,9 +214,8 @@ with blocks:
             # Top content
             gr.HTML(WHAT_IS_F1_HTML_TOP)
 
-            # Examples (kept inside a centered, 800px container)
+            # Examples (kept inside a centered container; content itself 730px wide)
             with gr.Group(elem_id="f1-examples", elem_classes=["f1-container"]):
-                # centered pill title
                 gr.HTML(
                     '<div class="f1-tabs-body"><div class="f1-examples-chip">Examples of FormulaOne problems</div></div>'
                 )
@@ -259,7 +258,7 @@ with blocks:
                     choices=["Warmup", "Tier 1", "Tier 2"],
                     value="Warmup",
                     label=None,
-                    show_label=False,  # hide caption
+                    show_label=False,
                     elem_id="f1-example-radio",
                 )
                 tab_radio.change(_select_example_tab, inputs=tab_radio, outputs=[md_warmup, md_tier1, md_tier2])
@@ -269,7 +268,7 @@ with blocks:
 
             # Embed video via Gradio so it renders reliably
             gr.Video(
-                value="/file=assets/DominatingSetAnimation.mp4",
+                "assets/DominatingSetAnimation.mp4",
                 autoplay=True,
                 loop=True,
                 show_label=False,

src/about.py

@@ -1,7 +1,6 @@
 # The paper's URL for linking
 PAPER_URL = "https://arxiv.org/abs/2507.13337"
 
-# Top chunk — same as before (div grid table), unchanged except for minor structure.
 WHAT_IS_F1_HTML_TOP = f"""
 <div class="f1-container">
   <header class="text-center mb-12">
@@ -15,7 +14,6 @@ WHAT_IS_F1_HTML_TOP = f"""
 
     <p class="mb-4 f1-p"><strong>FormulaOne</strong> consists of 220 novel dynamic programming problems over graphs. The problems are organised into three categories, ranging from moderate difficulty and all the way up to research-level.</p>
 
-    <!-- Clean, centered "table" using a single grid -->
     <div class="f1-grid-wrap" role="region" aria-label="FormulaOne categories">
       <div class="f1-grid-table" role="table">
         <div class="f1-grid-row f1-grid-head" role="row">
@@ -44,7 +42,6 @@ WHAT_IS_F1_HTML_TOP = f"""
 </div>
 """
 
-# Bottom content split around the video so we can embed it with gr.Video in app.py
 WHAT_IS_F1_HTML_BOTTOM_TOP = """
 <div class="f1-container">
   <section>
@@ -86,12 +83,12 @@ WHAT_IS_F1_HTML_BOTTOM_TAIL = """
     <h2 class="f1-h2">Model Accuracy</h2>
     <p class="mb-4 f1-p">On the <strong>FormulaOne-Warmup</strong> problems, frontier models perform reasonably well. This confirms they have a foundational capability for these types of algorithmic tasks.</p>
     <figure class="f1-figure">
-        <img src="/file=assets/warmup_performance.png" alt="Plot showing model performance on FormulaOne-Warmup" class="max-w-full md:max-w-2xl mx_auto rounded-lg shadow-md">
+        <img src="/file=assets/warmup_performance.png" alt="Plot showing model performance on FormulaOne-Warmup" class="max-w-full md:max-w-2xl mx-auto rounded-lg shadow-md">
         <figcaption class="f1-figcaption">Performance of frontier models on the FormulaOne-Warmup dataset.</figcaption>
     </figure>
     <p class="mb-4 f1-p">However, as the reasoning depth increases in <strong>Tier 1</strong>, and solutions require the discovery and integration of novel and more complex state representations, model performance drops off sharply.</p>
     <figure class="f1-figure">
-        <img src="/file=assets/tier1_performance.png" alt="Plot showing model performance on Tier 1" class="max-w-full md:max-w-2xl mx_auto rounded-lg shadow-md">
+        <img src="/file=assets/tier1_performance.png" alt="Plot showing model performance on Tier 1" class="max-w-full md:max-w-2xl mx-auto rounded-lg shadow-md">
         <figcaption class="f1-figcaption">Performance of frontier reasoning models on the FormulaOne dataset.</figcaption>
     </figure>
     <p class="f1-p">This trend culminates in <strong>Tier 2</strong>, where the difficulty is characteristic of exploratory research problems. On this set of 20 problems, no current frontier model solves even a single one. This result starkly illustrates the gap that remains between high performance on existing benchmarks and the deep algorithmic reasoning required for truly complex problems.</p>
@@ -99,6 +96,7 @@ WHAT_IS_F1_HTML_BOTTOM_TAIL = """
 </div>
 """
 
+
 EVALUATION_QUEUE_TEXT = """
 ## Submitting to the FormulaOne Leaderboard
 

src/display/css_html_js.py

@@ -6,7 +6,7 @@ custom_css = """
   --f1-bg: #ffffff;
   --f1-bg-muted: #f9fafb;
 
-  /* Disable Gradio block chrome that was bleeding into the Examples switcher */
+  /* Disable Gradio chrome that was bleeding into the examples block */
   --block-border-color: transparent !important;
   --background-fill-primary: transparent !important;
 }
@@ -15,7 +15,9 @@ custom_css = """
 .f1-container { max-width: 800px; margin: 0 auto; padding: 0 16px; }
 .markdown-text { font-size: 16px !important; max-width: 800px; margin: 0 auto; }
 #what-is-tab { max-width: 800px; margin-left: auto; margin-right: auto; }
-#f1-examples { max-width: 800px; margin: 0 auto; }
+
+/* Examples wrapper stays centered, content width 730px */
+#f1-examples { max-width: 730px; margin: 0 auto; }
 
 /* Body text */
 .f1-p, .f1-li {
@@ -45,75 +47,81 @@ custom_css = """
 
 /* Captions, problem name */
 .f1-figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: #111827; text-align: center; }
-.f1-problem-name { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 600; text-align: center; }
 
-/* ===== Clean "table" (equal column widths per column; compact first two, flexible third) ===== */
+/* Problem name: guarantee center on first render; force bg color for <code> */
+#f1-examples .f1-problem-markdown .markdown p.f1-problem-name { text-align: center !important; margin: 0 0 8px 0; }
+#f1-examples .f1-problem-markdown .markdown p.f1-problem-name code {
+  display: inline-block;
+  background: #f9fafb !important;   /* requested override; bypasses --code-background-fill */
+  padding: 2px 8px;
+  border-radius: 6px;
+}
+
+/* ===== Clean "table" (column-consistent widths; compact first two, flexible third) ===== */
 .f1-grid-wrap { text-align: center; margin: 10px auto 8px auto; }
 .f1-grid-table {
-  display: inline-grid;                                   /* center + shrink-to-fit */
+  display: inline-grid;
   grid-template-columns: max-content max-content minmax(360px, auto);
-  border: 1px solid var(--f1-border);                     /* full border */
+  border: 1px solid var(--f1-border);
   background: var(--f1-bg);
   border-radius: 8px;
   overflow: hidden;
 }
-.f1-grid-row { display: contents; }                       /* rows share the same columns */
+.f1-grid-row { display: contents; }
 .f1-grid-cell {
   padding: 8px 12px;
   text-align: left;
   border-left: 1px solid var(--f1-border);
   border-top: 1px solid var(--f1-border);
 }
-.f1-grid-cell:nth-child(3n+1) { border-left: none; }      /* first column cells: no left border */
-.f1-grid-head .f1-grid-cell {
-  font-weight: 600;
-  text-align: center;
-  border-top: none;                                       /* top edge of the grid */
-}
+.f1-grid-cell:nth-child(3n+1) { border-left: none; }
+.f1-grid-head .f1-grid-cell { font-weight: 600; text-align: center; border-top: none; }
 
 /* ===== Examples block ===== */
 #f1-examples {
-  background: var(--f1-bg-muted);                         /* #f9fafb */
+  background: var(--f1-bg-muted);   /* #f9fafb */
   border: 1px solid var(--f1-border);
   border-radius: 10px;
   box-shadow: 0 1px 2px rgba(0,0,0,0.04);
   margin-bottom: 12px;
 }
+#f1-examples .form { background: transparent !important; }  /* no background on inner .form */
+
 .f1-tabs-body { padding-top: 12px; text-align: center; }
 .f1-examples-chip {
   display: inline-block;
-  background: #e5e7eb;                                    /* slightly darker than #f9fafb */
+  background: #e5e7eb;              /* slightly darker than #f9fafb */
   color: #111827;
   padding: 6px 12px;
   border-radius: 999px;
   font-weight: 700;
 }
 
-/* Problem content: consistent background + padding + spacing above the tabs */
+/* Problem content: consistent background + padding; modest space before tabs */
 #f1-examples .f1-problem-markdown .markdown {
   background: var(--f1-bg-muted);
   border: 1px solid var(--f1-border);
   border-radius: 8px;
   padding: 18px;
-  margin: 10px 14px 12px 14px;                            /* bottom margin creates padding before tabs */
+  margin: 10px 14px 10px 14px;      /* slightly reduced bottom margin */
 }
 
-/* Pills (Radio) — hide bullets, light gray inactive, darker selected */
-#f1-example-radio { border-top: 1px solid var(--f1-border); padding: 8px 10px 10px 10px; margin: 0 8px 8px; }
+/* Pills (Radio) — hide bullets; light gray inactive; darker selected; minimal bottom padding */
+#f1-example-radio { border-top: 1px solid var(--f1-border); padding: 8px 10px 4px 10px; margin: 0 8px 4px; }
 #f1-example-radio input[type="radio"] { display: none; }
-#f1-example-radio .wrap { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
+#f1-example-radio .wrap { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start; }
 #f1-example-radio label {
   border: 1px solid var(--f1-border);
   border-radius: 999px;
-  padding: 6px 12px;
+  padding: 6px 10px;
   cursor: pointer;
-  background: #f3f4f6;                                    /* inactive pills */
+  background: #f3f4f6;              /* inactive pills */
 }
 #f1-example-radio input[type="radio"]:checked + span {
-  background: #e5e7eb;                                    /* active pill */
+  background: #e5e7eb;              /* active pill */
   border-color: var(--f1-border);
   border-radius: 999px;
-  padding: 6px 12px;
+  padding: 6px 10px;
 }
 
 /* Gradio video styling (centered, rounded, subtle shadow) */
@@ -125,12 +133,16 @@ custom_css = """
 #formulaone-leaderboard-tab-table .row, #formulaone-leaderboard-tab-table .column { width: 100% !important; max-width: 100% !important; }
 #formulaone-leaderboard-tab-table [data-testid="dropdown"], #formulaone-leaderboard-tab-table input[type="text"] { width: 100% !important; }
 
-/* Login button: force light */
+/* Login button: force light + width cap at 800 and center */
 #hf-login-btn, #hf-login-btn button, button[data-testid="login-button"], [data-testid="login-button"] button, div[data-testid="login-button"] > button {
   background: #ffffff !important;
   color: #1f2937 !important;
   border: 1px solid var(--f1-border) !important;
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04) !important;
+  max-width: 800px !important;
+  width: 100% !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
 }
 #hf-login-btn:hover, #hf-login-btn button:hover, button[data-testid="login-button"]:hover, [data-testid="login-button"] button:hover, div[data-testid="login-button"] > button:hover { background: #f9fafb !important; }
 """