From a84151e4829dfa3b11d37260eac272929e6a7cf3 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Fri, 10 Jul 2026 07:30:00 -0500
Subject: [PATCH] fix(stats): restore sticky comparison header

---
 .../[firstModel]/[secondLab]/[secondModel].tsx  | 17 ++++++++++++++++-
 packages/stats/app/src/routes/index.css         | 16 ++++++++++++++--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/stats/app/src/routes/compare/[firstLab]/[firstModel]/[secondLab]/[secondModel].tsx b/packages/stats/app/src/routes/compare/[firstLab]/[firstModel]/[secondLab]/[secondModel].tsx
index 104b0ebb1e..34fda33146 100644
--- a/packages/stats/app/src/routes/compare/[firstLab]/[firstModel]/[secondLab]/[secondModel].tsx
+++ b/packages/stats/app/src/routes/compare/[firstLab]/[firstModel]/[secondLab]/[secondModel].tsx
@@ -150,6 +150,8 @@ export default function ModelComparePair() {
   const [themePreference, setThemePreference] = createSignal<ThemePreference>("system")
   const [highlightBest, setHighlightBest] = createSignal(true)
   const [addingModel, setAddingModel] = createSignal(false)
+  let comparisonHeadingScroll: HTMLDivElement | undefined
+  let comparisonBodyScroll: HTMLDivElement | undefined
   const models = createMemo(
     () =>
       modelSelections().map((model, index) =>
@@ -188,6 +190,9 @@ export default function ModelComparePair() {
     if (typeof window === "undefined" || next.length < 2) return
     window.location.href = comparisonModelsHref(next)
   }
+  const syncComparisonScroll = (source: HTMLDivElement, target: HTMLDivElement | undefined) => {
+    if (target && target.scrollLeft !== source.scrollLeft) target.scrollLeft = source.scrollLeft
+  }
   const structuredData = createMemo(() =>
     JSON.stringify({
       "@context": "https://schema.org",
@@ -260,8 +265,18 @@ export default function ModelComparePair() {
             data-model-count={models().length}
             style={`--compare-detail-grid: ${comparisonDetailGridTemplate(models().length)}`}
           >
-            <div data-component="compare-detail-scroll">
+            <div
+              data-component="compare-detail-heading-scroll"
+              ref={(element) => (comparisonHeadingScroll = element)}
+              onScroll={(event) => syncComparisonScroll(event.currentTarget, comparisonBodyScroll)}
+            >
               <ComparisonPairSelector catalogModels={selectorModels()} models={models()} />
+            </div>
+            <div
+              data-component="compare-detail-body-scroll"
+              ref={(element) => (comparisonBodyScroll = element)}
+              onScroll={(event) => syncComparisonScroll(event.currentTarget, comparisonHeadingScroll)}
+            >
               <Show
                 when={stats() !== undefined}
                 fallback={
diff --git a/packages/stats/app/src/routes/index.css b/packages/stats/app/src/routes/index.css
index 75fad6a069..5e6f3ab53c 100644
--- a/packages/stats/app/src/routes/index.css
+++ b/packages/stats/app/src/routes/index.css
@@ -6089,9 +6089,21 @@
   position: relative;
 }
 
-[data-page="stats"] [data-component="compare-detail-scroll"] {
+[data-page="stats"] [data-component="compare-detail-heading-scroll"] {
+  position: sticky;
+  top: 72px;
+  z-index: 9;
+  overflow-x: auto;
+  background: var(--stats-bg);
+  scrollbar-width: none;
+}
+
+[data-page="stats"] [data-component="compare-detail-heading-scroll"]::-webkit-scrollbar {
+  display: none;
+}
+
+[data-page="stats"] [data-component="compare-detail-body-scroll"] {
   overflow-x: auto;
-  overflow-y: hidden;
 }
 
 [data-page="stats"] [data-section="compare-detail-selector"],