fix(stats): restore sticky comparison header

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={

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"],