Collapse the ranking boards to ten rows and add a jump menu beside them

src/app/globals.css

@@ -126,3 +126,14 @@ body {
   background: #f9fafb;
   font-weight: 600;
 }
+
+/*
+ * In-page anchor jumps (the rankings page section menu) glide rather than
+ * teleport, so the reader keeps their bearings. Motion is opt-out: readers who
+ * have asked for less of it keep the instant jump.
+ */
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    scroll-behavior: smooth;
+  }
+}

src/app/page.tsx

@@ -5,6 +5,7 @@ import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react';
 import { Info } from 'lucide-react';
 import Breadcrumbs from '@/src/components/Breadcrumbs';
 import RankingTableElo from '@/src/components/RankingTableElo';
+import SectionNav, { NavSection } from '@/src/components/SectionNav';
 import TimeSeriesChart from '@/src/components/TimeSeriesChart';
 import { getFilteredRankings, getRankingFilters, collectSqlEligible, ModelRanking, FilterOptions, ChallengeDefinition } from '@/src/services/modelService';
 import { getDefinitionRounds } from '@/src/services/definitionService';
@@ -12,6 +13,33 @@ import { getDefinitionRounds } from '@/src/services/definitionService';
 const DEFINITION_ID:number = parseInt(process.env.NEXT_PUBLIC_DEFINITION_ID || '225');
 const SERIES_ID:number = parseInt(process.env.NEXT_PUBLIC_SERIES_ID || '1373');
 
+/**
+ * Jump-menu entries, in page order — the `id` of each has to match the
+ * corresponding `<section>` below. Module scope, not an inline literal:
+ * SectionNav re-subscribes its observer whenever this array's identity changes.
+ */
+const PAGE_SECTIONS: NavSection[] = [
+  { id: 'live-forecast', label: 'Live Forecast' },
+  { id: 'overall-ranking', label: 'Overall Ranking' },
+  { id: 'rankings-by-challenge', label: 'By Challenge' },
+  { id: 'rankings-by-frequency-horizon', label: 'By Frequency & Horizon' },
+];
+
+/**
+ * Rows each board shows before the reader expands it. The three sections used to
+ * run to full length, which pushed the two lower ones out of sight entirely.
+ */
+const COLLAPSED_ROWS = 10;
+
+/** Stands in for a board while its rankings are in flight. */
+function RankingPlaceholder() {
+  return (
+    <div className="bg-white rounded-lg shadow-md p-8 text-center text-gray-500">
+      Loading ranking...
+    </div>
+  );
+}
+
 interface RankingsData {
   overall: ModelRanking[];
   byDefinition: Record<number, ModelRanking[]>;
@@ -295,11 +323,15 @@ export default function Home() {
     fetchAllData();
   }, [selectedCalculationDate, isMounted]);
 
-  // `loading` covers the rankings only, and is applied to the ranking sections
-  // below rather than to the whole page. Returning a different tree here would
-  // unmount TimeSeriesChart every time the flag moves, throwing away the data
-  // it had already fetched and making it start over. Nothing in the chart
-  // depends on the rankings, so it renders on its own schedule.
+  // `loading` covers the rankings only, and is applied to the boards inside the
+  // ranking sections rather than to the whole page. Returning a different tree
+  // here would unmount TimeSeriesChart every time the flag moves, throwing away
+  // the data it had already fetched and making it start over. Nothing in the
+  // chart depends on the rankings, so it renders on its own schedule.
+  //
+  // The section wrappers are outside the flag as well, so their ids exist from
+  // the first paint — SectionNav resolves its targets on mount and would find
+  // nothing to observe if the sections appeared only once the boards had loaded.
   return (
     <div className="min-h-screen bg-gray-50 p-4 sm:p-6 lg:p-8">
       <main className="max-w-7xl mx-auto">
@@ -313,192 +345,199 @@ export default function Home() {
           </p>
         </div>
 
-        {/* Time Series Chart Section */}
-        {roundLoading ? (
-          <div className="bg-white rounded-lg shadow-md p-4 sm:p-6 lg:p-8 mb-8">
-            <div className="flex items-center justify-center">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
-              <span className="ml-3 text-gray-600">Loading time series data...</span>
-            </div>
-          </div>
-        ) : oldestActiveRound ? (
-          <div className="mb-8">
-            <TimeSeriesChart
-              challengeId={oldestActiveRound.id}
-              challengeName={oldestActiveRound.name || oldestActiveRound.round_name}
-              challengeDescription={oldestActiveRound.description}
-              frequency={oldestActiveRound.frequency}
-              horizon={oldestActiveRound.horizon}
-              seriesId={SERIES_ID}
-              on_title_page={true}
-              definitionId={DEFINITION_ID}
-            />
-          </div>
-        ) : (
-          <div className="bg-white rounded-lg shadow-md p-4 sm:p-6 lg:p-8 text-center text-gray-500 mb-8">
-            <p>No active rounds available at the moment.</p>
-          </div>
-        )}
-
-        {/* The three ranking sections share one loading state. Only this
-            subtree swaps while the rankings load — the chart above keeps
-            its mount and its in-flight requests. */}
-        {loading ? (
-          <div className="text-center py-12">
-            <div className="text-lg text-gray-600">Loading ranking...</div>
-          </div>
-        ) : (
-          <>
-        {/* Overall Ranking (Full Table) */}
-        <div className="mb-8">
-          <div className="flex items-center justify-between mb-1">
-            <h2 className="text-2xl font-semibold text-gray-900">Overall Ranking</h2>
-            
-            {/* Calculation Month Filter */}
-            {/* `relative` sits here, not on the Popover: the Popover box is only as
-                wide as its 16px icon, so a `right-0` panel anchored to it starts
-                off the left edge of a phone screen. Anchoring to this row instead
-                gives the panel the full card width to grow into. `group` stays on
-                the Popover so hover still only triggers from the icon. */}
-            <div className="relative flex items-center gap-2">
-              <label className="text-xs text-gray-500">Period</label>
-              <Popover className="group">
-                {({ open }) => (
-                  <>
-                    <PopoverButton
-                      className="flex items-center justify-center w-11 h-11 -m-[14px] rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
-                      aria-label="About the calculation period"
-                    >
-                      <Info className="w-4 h-4" aria-hidden="true" />
-                    </PopoverButton>
-                    <PopoverPanel
-                      static
-                      className={`absolute right-0 top-6 w-72 max-w-[calc(100vw-2rem)] p-3 bg-gray-900 text-white text-xs rounded-lg shadow-lg transition-all duration-200 z-10 ${
-                        open ? 'opacity-100 visible' : 'opacity-0 invisible group-hover:opacity-100 group-hover:visible'
-                      }`}
-                    >
-                      <div className="font-medium mb-1">Calculation Period</div>
-                      <div className="text-gray-200 space-y-1">
-                        <p>Rankings are recalculated multiple times a day as new ground truth data arrives.</p>
-                        <p>Historical standings are snapshotted once per month. Select a month to view that period&apos;s snapshot.</p>
-                        <p>&ldquo;Recent&rdquo; shows today&apos;s current ranking.</p>
-                      </div>
-                    </PopoverPanel>
-                  </>
-                )}
-              </Popover>
-              <select
-                value={selectedCalculationDate}
-                onChange={(e) => setSelectedCalculationDate(e.target.value)}
-                className="px-3 py-1 text-base sm:text-xs bg-white border border-gray-200 rounded text-gray-600 hover:border-gray-300 focus:outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400 cursor-pointer"
-              >
-                {monthOptions.map((option) => (
-                  <option key={option.value} value={option.value}>
-                    {option.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </div>
-          <p className="text-sm text-gray-600 mb-4">
-            Aggregated scores across all challenge definitions and time series. ELO: higher is
-            better. MASE and SQL: lower is better. SQL is shown only for models that submit
-            quantile forecasts. Updated multiple times a day.
-          </p>
-          <RankingTableElo
-            rankings={rankingsData.overall}
-            sqlEligibleModelIds={rankingsData.sqlEligible.overall}
-          />
-        </div>
+        {/* The jump menu sits beside the content, not above it, so the boards
+            further down the page are visible as destinations from the top. */}
+        <div className="lg:grid lg:grid-cols-[13rem_minmax(0,1fr)] lg:gap-x-8 lg:items-start">
+          <SectionNav sections={PAGE_SECTIONS} />
 
-        {/* Rankings by Challenge Definition */}
-        <div className="mb-8">
-          <div className="flex flex-wrap items-center justify-between gap-3 mb-2">
-            <h2 className="text-2xl font-semibold text-gray-900">Rankings by Challenge</h2>
-            <select
-              value={effectiveDefinitionId ?? ''}
-              onChange={(e) => setSelectedDefinitionId(Number(e.target.value))}
-              disabled={filterOptions.definitions.length === 0}
-              className="px-3 py-2 text-base sm:text-sm bg-white border border-gray-200 rounded-md text-gray-700 hover:border-gray-300 focus:outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400 cursor-pointer max-w-full sm:max-w-sm disabled:opacity-50"
-            >
-              {filterOptions.definitions.map((def) => (
-                <option key={def.id} value={def.id}>
-                  {def.name}
-                </option>
-              ))}
-            </select>
-          </div>
-          <p className="text-sm text-gray-600 mb-4">
-            Rankings evaluated for the selected challenge definition.
-          </p>
-          {selectedDefinition ? (
-            <RankingTableElo
-              key={selectedDefinition.id}
-              rankings={rankingsData.byDefinition[selectedDefinition.id] || []}
-              sqlEligibleModelIds={rankingsData.sqlEligible.byDefinition[selectedDefinition.id]}
-              limit={10}
-              title={selectedDefinition.name}
-              definitionId={selectedDefinition.id}
-            />
-          ) : (
-            <p className="text-sm text-gray-500">No challenge definitions available.</p>
-          )}
-        </div>
+          <div className="min-w-0 lg:col-start-2 lg:row-start-1">
+            {/* Time Series Chart Section */}
+            <section id="live-forecast" className="mb-8 scroll-mt-20 lg:scroll-mt-8">
+              {roundLoading ? (
+                <div className="bg-white rounded-lg shadow-md p-4 sm:p-6 lg:p-8">
+                  <div className="flex items-center justify-center">
+                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+                    <span className="ml-3 text-gray-600">Loading time series data...</span>
+                  </div>
+                </div>
+              ) : oldestActiveRound ? (
+                <TimeSeriesChart
+                  challengeId={oldestActiveRound.id}
+                  challengeName={oldestActiveRound.name || oldestActiveRound.round_name}
+                  challengeDescription={oldestActiveRound.description}
+                  frequency={oldestActiveRound.frequency}
+                  horizon={oldestActiveRound.horizon}
+                  seriesId={SERIES_ID}
+                  on_title_page={true}
+                  definitionId={DEFINITION_ID}
+                />
+              ) : (
+                <div className="bg-white rounded-lg shadow-md p-4 sm:p-6 lg:p-8 text-center text-gray-500">
+                  <p>No active rounds available at the moment.</p>
+                </div>
+              )}
+            </section>
 
-        {/* Rankings by Frequency/Horizon */}
-        <div className="mb-8">
-          <div className="flex flex-wrap items-center justify-between gap-3 mb-2">
-            <h2 className="text-2xl font-semibold text-gray-900">Rankings by Frequency & Horizon Combinations</h2>
-            <div className="flex flex-wrap items-center gap-3">
-              <label className="flex items-center gap-1.5 text-sm text-gray-600">
-                <span>Frequency</span>
-                <select
-                  value={effectiveFrequency ?? ''}
-                  onChange={(e) => setSelectedFrequency(e.target.value)}
-                  disabled={frequencyOptions.length === 0}
-                  className="px-3 py-2 text-base sm:text-sm bg-white border border-gray-200 rounded-md text-gray-700 hover:border-gray-300 focus:outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400 cursor-pointer disabled:opacity-50"
-                >
-                  {frequencyOptions.map((f) => (
-                    <option key={f} value={f}>
-                      {formatFrequency(f)}
-                    </option>
-                  ))}
-                </select>
-              </label>
-              <label className="flex items-center gap-1.5 text-sm text-gray-600">
-                <span>Horizon</span>
+            {/* Overall Ranking */}
+            <section id="overall-ranking" className="mb-8 scroll-mt-20 lg:scroll-mt-8">
+              <div className="flex items-center justify-between mb-1">
+                <h2 className="text-2xl font-semibold text-gray-900">Overall Ranking</h2>
+
+                {/* Calculation Month Filter */}
+                {/* `relative` sits here, not on the Popover: the Popover box is only as
+                    wide as its 16px icon, so a `right-0` panel anchored to it starts
+                    off the left edge of a phone screen. Anchoring to this row instead
+                    gives the panel the full card width to grow into. `group` stays on
+                    the Popover so hover still only triggers from the icon. */}
+                <div className="relative flex items-center gap-2">
+                  <label className="text-xs text-gray-500">Period</label>
+                  <Popover className="group">
+                    {({ open }) => (
+                      <>
+                        <PopoverButton
+                          className="flex items-center justify-center w-11 h-11 -m-[14px] rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
+                          aria-label="About the calculation period"
+                        >
+                          <Info className="w-4 h-4" aria-hidden="true" />
+                        </PopoverButton>
+                        <PopoverPanel
+                          static
+                          className={`absolute right-0 top-6 w-72 max-w-[calc(100vw-2rem)] p-3 bg-gray-900 text-white text-xs rounded-lg shadow-lg transition-all duration-200 z-10 ${
+                            open ? 'opacity-100 visible' : 'opacity-0 invisible group-hover:opacity-100 group-hover:visible'
+                          }`}
+                        >
+                          <div className="font-medium mb-1">Calculation Period</div>
+                          <div className="text-gray-200 space-y-1">
+                            <p>Rankings are recalculated multiple times a day as new ground truth data arrives.</p>
+                            <p>Historical standings are snapshotted once per month. Select a month to view that period&apos;s snapshot.</p>
+                            <p>&ldquo;Recent&rdquo; shows today&apos;s current ranking.</p>
+                          </div>
+                        </PopoverPanel>
+                      </>
+                    )}
+                  </Popover>
+                  <select
+                    value={selectedCalculationDate}
+                    onChange={(e) => setSelectedCalculationDate(e.target.value)}
+                    disabled={monthOptions.length === 0}
+                    className="px-3 py-1 text-base sm:text-xs bg-white border border-gray-200 rounded text-gray-600 hover:border-gray-300 focus:outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400 cursor-pointer disabled:opacity-50"
+                  >
+                    {monthOptions.map((option) => (
+                      <option key={option.value} value={option.value}>
+                        {option.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+              <p className="text-sm text-gray-600 mb-4">
+                Aggregated scores across all challenge definitions and time series. ELO: higher is
+                better. MASE and SQL: lower is better. SQL is shown only for models that submit
+                quantile forecasts. Updated multiple times a day.
+              </p>
+              {loading ? (
+                <RankingPlaceholder />
+              ) : (
+                <RankingTableElo
+                  rankings={rankingsData.overall}
+                  sqlEligibleModelIds={rankingsData.sqlEligible.overall}
+                  limit={COLLAPSED_ROWS}
+                />
+              )}
+            </section>
+
+            {/* Rankings by Challenge Definition */}
+            <section id="rankings-by-challenge" className="mb-8 scroll-mt-20 lg:scroll-mt-8">
+              <div className="flex flex-wrap items-center justify-between gap-3 mb-2">
+                <h2 className="text-2xl font-semibold text-gray-900">Rankings by Challenge</h2>
                 <select
-                  value={effectiveHorizon ?? ''}
-                  onChange={(e) => setSelectedHorizon(e.target.value)}
-                  disabled={horizonOptions.length === 0}
-                  className="px-3 py-2 text-base sm:text-sm bg-white border border-gray-200 rounded-md text-gray-700 hover:border-gray-300 focus:outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400 cursor-pointer disabled:opacity-50"
+                  value={effectiveDefinitionId ?? ''}
+                  onChange={(e) => setSelectedDefinitionId(Number(e.target.value))}
+                  disabled={filterOptions.definitions.length === 0}
+                  className="px-3 py-2 text-base sm:text-sm bg-white border border-gray-200 rounded-md text-gray-700 hover:border-gray-300 focus:outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400 cursor-pointer max-w-full sm:max-w-sm disabled:opacity-50"
                 >
-                  {horizonOptions.map((h) => (
-                    <option key={h} value={h}>
-                      {h}
+                  {filterOptions.definitions.map((def) => (
+                    <option key={def.id} value={def.id}>
+                      {def.name}
                     </option>
                   ))}
                 </select>
-              </label>
-            </div>
+              </div>
+              <p className="text-sm text-gray-600 mb-4">
+                Rankings evaluated for the selected challenge definition.
+              </p>
+              {loading ? (
+                <RankingPlaceholder />
+              ) : selectedDefinition ? (
+                <RankingTableElo
+                  key={selectedDefinition.id}
+                  rankings={rankingsData.byDefinition[selectedDefinition.id] || []}
+                  sqlEligibleModelIds={rankingsData.sqlEligible.byDefinition[selectedDefinition.id]}
+                  limit={COLLAPSED_ROWS}
+                  title={selectedDefinition.name}
+                  definitionId={selectedDefinition.id}
+                />
+              ) : (
+                <p className="text-sm text-gray-500">No challenge definitions available.</p>
+              )}
+            </section>
+
+            {/* Rankings by Frequency/Horizon */}
+            <section id="rankings-by-frequency-horizon" className="mb-8 scroll-mt-20 lg:scroll-mt-8">
+              <div className="flex flex-wrap items-center justify-between gap-3 mb-2">
+                <h2 className="text-2xl font-semibold text-gray-900">Rankings by Frequency &amp; Horizon Combinations</h2>
+                <div className="flex flex-wrap items-center gap-3">
+                  <label className="flex items-center gap-1.5 text-sm text-gray-600">
+                    <span>Frequency</span>
+                    <select
+                      value={effectiveFrequency ?? ''}
+                      onChange={(e) => setSelectedFrequency(e.target.value)}
+                      disabled={frequencyOptions.length === 0}
+                      className="px-3 py-2 text-base sm:text-sm bg-white border border-gray-200 rounded-md text-gray-700 hover:border-gray-300 focus:outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400 cursor-pointer disabled:opacity-50"
+                    >
+                      {frequencyOptions.map((f) => (
+                        <option key={f} value={f}>
+                          {formatFrequency(f)}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+                  <label className="flex items-center gap-1.5 text-sm text-gray-600">
+                    <span>Horizon</span>
+                    <select
+                      value={effectiveHorizon ?? ''}
+                      onChange={(e) => setSelectedHorizon(e.target.value)}
+                      disabled={horizonOptions.length === 0}
+                      className="px-3 py-2 text-base sm:text-sm bg-white border border-gray-200 rounded-md text-gray-700 hover:border-gray-300 focus:outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400 cursor-pointer disabled:opacity-50"
+                    >
+                      {horizonOptions.map((h) => (
+                        <option key={h} value={h}>
+                          {h}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+                </div>
+              </div>
+              <p className="text-sm text-gray-600 mb-4">
+                Rankings for the selected forecast frequency / horizon combination.
+              </p>
+              {loading ? (
+                <RankingPlaceholder />
+              ) : selectedFh ? (
+                <RankingTableElo
+                  key={selectedFh}
+                  rankings={rankingsData.byFrequencyHorizon[selectedFh] || []}
+                  sqlEligibleModelIds={rankingsData.sqlEligible.byFrequencyHorizon[selectedFh]}
+                  limit={COLLAPSED_ROWS}
+                  title={formatFrequencyHorizon(selectedFh)}
+                />
+              ) : (
+                <p className="text-sm text-gray-500">No frequency / horizon combinations available.</p>
+              )}
+            </section>
           </div>
-          <p className="text-sm text-gray-600 mb-4">
-            Rankings for the selected forecast frequency / horizon combination.
-          </p>
-          {selectedFh ? (
-            <RankingTableElo
-              key={selectedFh}
-              rankings={rankingsData.byFrequencyHorizon[selectedFh] || []}
-              sqlEligibleModelIds={rankingsData.sqlEligible.byFrequencyHorizon[selectedFh]}
-              limit={10}
-              title={formatFrequencyHorizon(selectedFh)}
-            />
-          ) : (
-            <p className="text-sm text-gray-500">No frequency / horizon combinations available.</p>
-          )}
         </div>
-          </>
-        )}
       </main>
     </div>
   );

src/components/RankingTableElo.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react';
 import {
@@ -12,13 +12,18 @@ import {
   flexRender,
   SortDirection,
 } from '@tanstack/react-table';
-import { Info } from 'lucide-react';
+import { ChevronDown, Info } from 'lucide-react';
 import { ModelRanking } from '@/src/services/modelService';
 
 interface RankingTableEloProps {
   rankings: ModelRanking[];
   compact?: boolean;
   title?: string;
+  /**
+   * How many rows to show while collapsed. The board still holds every model —
+   * sorting and the column filters act on all of them, and a footer control
+   * expands to the full list. Omit to always show everything.
+   */
   limit?: number;
   definitionId?: number;
   /**
@@ -106,6 +111,13 @@ function HeaderWithInfo({
   );
 }
 
+/**
+ * Stand-in for an absent board. Callers routinely write `rankings={map[id] || []}`,
+ * which mints a new empty array every render; funnelling those through one
+ * constant keeps the `data` reference react-table sees stable. See the memo below.
+ */
+const NO_RANKINGS: ModelRanking[] = [];
+
 /** Tooltip body for the SQL column. Kept next to the header that uses it. */
 function SqlExplanation() {
   return (
@@ -127,18 +139,17 @@ export default function RankingTableElo({
   sqlEligibleModelIds,
 }: RankingTableEloProps) {
   const router = useRouter();
+  const [expanded, setExpanded] = useState(false);
 
   const handleRowClick = (modelId: string, modelName: string) => {
     router.push(`/models/${modelId}`);
   };
 
-  // Apply limit if specified. Memoize so the `data` reference passed to
-  // useReactTable is stable across renders — an unstable data ref each render
-  // makes react-table's auto-reset loop infinitely (freezing the page).
-  const displayedRankings = useMemo(
-    () => (limit ? rankings.slice(0, limit) : rankings),
-    [rankings, limit]
-  );
+  // The whole board goes to react-table; `limit` cuts the *rendered* rows further
+  // down, after sorting and filtering, so both act on every model rather than on
+  // the first ten. Memoized so the `data` reference is stable across renders — an
+  // unstable one makes react-table's auto-reset loop infinitely (freezing the page).
+  const data = useMemo(() => (rankings?.length ? rankings : NO_RANKINGS), [rankings]);
 
   const fullColumns = useMemo<ColumnDef<ModelRanking>[]>(
     () => [
@@ -381,7 +392,7 @@ export default function RankingTableElo({
   const columns = compact ? compactColumns : fullColumns;
 
   const table = useReactTable({
-    data: displayedRankings ?? [],
+    data,
     columns,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -396,6 +407,10 @@ export default function RankingTableElo({
     },
   });
 
+  const allRows = table.getRowModel().rows;
+  const collapsible = limit !== undefined && allRows.length > limit;
+  const rows = collapsible && !expanded ? allRows.slice(0, limit) : allRows;
+
   const getSortIcon = (isSorted: false | SortDirection) => {
     if (!isSorted) {
       return <span className="ml-1 text-gray-400">↕</span>;
@@ -423,7 +438,7 @@ export default function RankingTableElo({
           horizontal room, which pushes the ELO score (the point of the page)
           off-screen on a phone. */}
       <div className="md:hidden p-3 space-y-2">
-        {table.getRowModel().rows.map((row) => {
+        {rows.map((row) => {
           const model = row.original;
           const eloUpperDiff = model.elo_ci_upper - model.elo_rating_median;
           const eloLowerDiff = model.elo_rating_median - model.elo_ci_lower;
@@ -528,7 +543,7 @@ export default function RankingTableElo({
             ))}
           </thead>
           <tbody className="bg-white divide-y divide-gray-200">
-            {table.getRowModel().rows.map((row) => (
+            {rows.map((row) => (
               <tr 
                 key={row.id} 
                 className="hover:bg-gray-50 cursor-pointer transition-colors"
@@ -548,11 +563,30 @@ export default function RankingTableElo({
         </table>
       </div>
 
-      {table.getRowModel().rows.length === 0 && (
+      {allRows.length === 0 && (
         <div className="text-center py-8 text-gray-500">
           No rankings found.
         </div>
       )}
+
+      {collapsible && (
+        <div className="border-t border-gray-200 bg-gray-50">
+          <button
+            type="button"
+            onClick={() => setExpanded((wasExpanded) => !wasExpanded)}
+            aria-expanded={expanded}
+            className="flex w-full min-h-[44px] items-center justify-center gap-1.5 px-6 text-sm font-medium text-blue-600 transition-colors hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-400"
+          >
+            <span>
+              {expanded ? `Show top ${limit}` : `Show all ${allRows.length} models`}
+            </span>
+            <ChevronDown
+              className={`w-4 h-4 transition-transform ${expanded ? 'rotate-180' : ''}`}
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+      )}
     </div>
   );
 }

src/components/SectionNav.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export interface NavSection {
+  /** `id` of the element on the page this entry jumps to. */
+  id: string;
+  label: string;
+}
+
+interface SectionNavProps {
+  /**
+   * The sections, in page order. Pass a value with a stable identity (a module
+   * constant, or memoized) — a fresh array each render re-subscribes the
+   * observer on every render.
+   */
+  sections: NavSection[];
+}
+
+/**
+ * In-page jump menu.
+ *
+ * The rankings page stacks three boards below a full-height chart, far enough
+ * down that readers were not finding the per-challenge and
+ * per-frequency/horizon ones at all. This lists them all above the fold.
+ *
+ * One component, two layouts: a rail in the left gutter from `lg` up, and a
+ * strip of chips across the top below it, where there is no gutter to put a
+ * rail in. Both stick while the reader scrolls the sections past them.
+ */
+export default function SectionNav({ sections }: SectionNavProps) {
+  const [activeId, setActiveId] = useState<string>(sections[0]?.id ?? '');
+
+  useEffect(() => {
+    const elements = sections
+      .map((section) => document.getElementById(section.id))
+      .filter((element): element is HTMLElement => element !== null);
+    if (elements.length === 0) return;
+
+    // Ids currently in the band, kept across callbacks: an IntersectionObserver
+    // reports only what *changed*, so the full picture has to be accumulated.
+    const inBand = new Set<string>();
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) inBand.add(entry.target.id);
+          else inBand.delete(entry.target.id);
+        });
+
+        // Later sections win: scrolling down, the one that just arrived at the
+        // top of the screen is the one the reader has moved to.
+        for (let i = sections.length - 1; i >= 0; i--) {
+          if (inBand.has(sections[i].id)) {
+            setActiveId(sections[i].id);
+            return;
+          }
+        }
+      },
+      // Squeeze the root to a band across the top fifth of the viewport, so
+      // "in view" means "at the top of the screen". Against the whole viewport
+      // a board as tall as these would stay active long after the next one had
+      // scrolled into place.
+      { rootMargin: '0px 0px -80% 0px' }
+    );
+
+    elements.forEach((element) => observer.observe(element));
+    return () => observer.disconnect();
+  }, [sections]);
+
+  return (
+    <nav
+      aria-label="Sections on this page"
+      className="sticky top-0 z-20 -mx-4 mb-6 border-b border-gray-200 bg-gray-50/95 px-4 py-2 backdrop-blur sm:-mx-6 sm:px-6 lg:-mx-0 lg:mb-0 lg:self-start lg:top-8 lg:border-0 lg:bg-transparent lg:px-0 lg:py-0 lg:backdrop-blur-none"
+    >
+      <p className="hidden lg:block pl-3 pb-2 text-xs font-semibold uppercase tracking-wider text-gray-400">
+        On this page
+      </p>
+      <ul className="flex gap-2 overflow-x-auto lg:flex-col lg:gap-0.5 lg:overflow-visible">
+        {sections.map((section) => {
+          const isActive = section.id === activeId;
+          return (
+            <li key={section.id} className="shrink-0 lg:shrink">
+              <a
+                href={`#${section.id}`}
+                aria-current={isActive ? 'true' : undefined}
+                className={`flex min-h-[44px] items-center whitespace-nowrap rounded-md px-3 text-sm transition-colors lg:min-h-0 lg:whitespace-normal lg:rounded-none lg:border-l-2 lg:py-2 ${
+                  isActive
+                    ? 'bg-blue-50 font-medium text-blue-700 lg:bg-transparent lg:border-blue-500'
+                    : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900 lg:border-transparent lg:hover:bg-transparent lg:hover:border-gray-300'
+                }`}
+              >
+                {section.label}
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}