diff --git a/packages/ui/client/src/components/CompareDelta.test.ts b/packages/ui/client/src/components/CompareDelta.test.ts
new file mode 100644
index 0000000..183a478
--- /dev/null
+++ b/packages/ui/client/src/components/CompareDelta.test.ts
@@ -0,0 +1,32 @@
+import type { CompareAxis, Interval, PairedDelta } from '../comparison'
+
+import { describe, expect, it } from 'vitest'
+import { render } from 'vitest-browser-vue'
+
+import CompareDelta from './CompareDelta.vue'
+
+const axis: CompareAxis = { better: 'higher', kind: 'score', label: 'Overall', name: 'overall' }
+const value: Interval = { high: 0.8, low: 0.6, mean: 0.7, n: 6 }
+const delta: PairedDelta = { columnId: 'b', differences: [{ key: 'case-0', value: 0.1 }], interval: { high: 0.2, low: -0.05, mean: 0.1, n: 6 }, losses: 1, ties: 0, wins: 5 }
+const format = (number: number) => number.toFixed(2)
+
+describe('compareDelta', () => {
+  /**
+   * @example
+   * expect(screen.container.querySelectorAll('[data-testid=compare-delta-running]')).toHaveLength(1)
+   */
+  it('marks a column whose newest run is still running, and only that one', async () => {
+    const screen = await render(CompareDelta, {
+      props: {
+        axis,
+        baseline: { label: 'a', value },
+        caseLabels: new Map([['case-0', 'case 0']]),
+        formatDelta: format,
+        formatValue: format,
+        rows: [{ delta, label: 'b', running: true, value }, { delta: { ...delta, columnId: 'c' }, label: 'c', value }],
+      },
+    })
+
+    expect(screen.container.querySelectorAll('[data-testid=compare-delta-running]')).toHaveLength(1)
+  })
+})
diff --git a/packages/ui/client/src/components/CompareDelta.vue b/packages/ui/client/src/components/CompareDelta.vue
index d77b40f..c3a344b 100644
--- a/packages/ui/client/src/components/CompareDelta.vue
+++ b/packages/ui/client/src/components/CompareDelta.vue
@@ -15,6 +15,8 @@ export interface DeltaRow {
   hidden?: boolean
   href?: string
   label: string
+  /** The column's newest run is still running: a spinning ring beside its name. */
+  running?: boolean
   /** The column's own mean on the axis, shown next to its difference. */
   value: Interval
 }
@@ -32,7 +34,7 @@ export interface DeltaRow {
 const props = defineProps<{
   axis: CompareAxis
   /** The reference row, drawn first on the zero line with its own mean. */
-  baseline: { href?: string, label: string, value: Interval }
+  baseline: { href?: string, label: string, running?: boolean, value: Interval }
   /** Case name of each row key, for the case dots' tooltips. */
   caseLabels: ReadonlyMap<string, string>
   formatDelta: (value: number) => string
@@ -61,7 +63,10 @@ const ticks = computed(() => Math.max(2, Math.min(6, Math.floor((plotRight.value
 const scale = computed(() => {
   const reach = Math.max(1e-9, ...props.rows.filter(row => !row.hidden).flatMap(row => [Math.abs(row.delta.interval.low), Math.abs(row.delta.interval.high), ...row.delta.differences.map(difference => Math.abs(difference.value))]))
   // Clamped: a hidden outlier left out of the domain stays pinned at the edge instead of running off the chart.
-  return scaleLinear([-reach * 1.05, reach * 1.05], [plotLeft.value, plotRight.value]).nice(ticks.value).clamp(true)
+  // NOTICE: the domain is rounded for a fixed 6 ticks, not for the ticks this width shows: rounding for fewer ticks
+  // widened it (±40 pt became ±60 pt on a phone), so one difference looked smaller on a narrow screen. Only the tick
+  // labels thin out with the width.
+  return scaleLinear([-reach * 1.05, reach * 1.05], [plotLeft.value, plotRight.value]).nice(6).clamp(true)
 })
 
 /** Whether the interval is clear of zero, and if so whether the column is better by the axis's direction. */
@@ -95,6 +100,8 @@ function hoverCase(key: string, value: number, x: number, y: number): void {
         <a :href="props.baseline.href">
           <text :x="labelWidth" :y="rowHeight / 2 + 4" font-size="11" text-anchor="end" fill="var(--chart-text)" font-weight="600">{{ truncate(props.baseline.label) }}<title>{{ props.baseline.label }}</title></text>
         </a>
+        <!-- Still running: a spinning ring between the name and the plot, as the run state badges spin. -->
+        <circle v-if="props.baseline.running" :cx="labelWidth + 6" :cy="rowHeight / 2" r="3.5" fill="none" stroke="var(--mark-running)" stroke-width="1.5" stroke-dasharray="14 8" :class="['animate-spin origin-center [transform-box:fill-box]']" data-testid="compare-delta-running" />
         <circle :cx="scale(0)" :cy="rowHeight / 2" r="5" fill="var(--chart-surface)" stroke="var(--chart-text)" stroke-width="2" />
         <text :x="width - summaryWidth" :y="rowHeight / 2 + 4" font-size="11" fill="var(--chart-text)">
           <tspan font-weight="600">{{ props.formatValue(props.baseline.value.mean) }}</tspan>
@@ -107,6 +114,8 @@ function hoverCase(key: string, value: number, x: number, y: number): void {
         <a :href="row.href">
           <text :x="labelWidth" :y="rowHeight / 2 + 4" font-size="11" text-anchor="end" fill="var(--chart-text)" :class="[row.href && 'underline']">{{ truncate(row.label) }}<title>{{ row.label }}</title></text>
         </a>
+        <!-- Still running: a spinning ring between the name and the plot, as the run state badges spin. -->
+        <circle v-if="row.running" :cx="labelWidth + 6" :cy="rowHeight / 2" r="3.5" fill="none" stroke="var(--mark-running)" stroke-width="1.5" stroke-dasharray="14 8" :class="['animate-spin origin-center [transform-box:fill-box]']" data-testid="compare-delta-running" />
         <!-- Every case's difference, spread vertically by a stable offset so equal differences stay countable. -->
         <circle
           v-for="difference in row.delta.differences" :key="difference.key"
diff --git a/packages/ui/client/src/components/ComparePlane.vue b/packages/ui/client/src/components/ComparePlane.vue
index 9ceb7ef..abeb1b7 100644
--- a/packages/ui/client/src/components/ComparePlane.vue
+++ b/packages/ui/client/src/components/ComparePlane.vue
@@ -23,6 +23,8 @@ export interface PlanePoint {
   href?: string
   id: string
   label: string
+  /** The column's newest run is still running: a pulsing ring around its dot, and its card says so. */
+  running?: boolean
   x: Interval
   y: Interval
 }
@@ -50,6 +52,11 @@ const props = defineProps<{
   /** Ids on the Pareto front, ordered along x. */
   front: readonly string[]
   points: readonly PlanePoint[]
+  /**
+   * Draw the 95% interval of each mean. Without them the axes fit the means alone, so close columns spread out.
+   * @default true
+   */
+  whiskers?: boolean
   x: CompareAxis
   /**
    * `log` spreads values that span orders of magnitude (a 4 ms baseline beside 2.5 s rewrites); only for an axis whose
@@ -150,13 +157,18 @@ function useDomainTween(target: Ref<{ domain: [number, number], kind: ScaleKind
 const xTicks = computed(() => Math.max(2, Math.min(6, Math.floor((width.value - margin.left - margin.right) / 90))))
 const xKind = computed<ScaleKind>(() => props.xScaleKind ?? 'linear')
 const yKind = computed<ScaleKind>(() => props.yScaleKind ?? 'linear')
-/** Domain each axis settles on: the nice linear domain, or the log domain. */
+/** The part of an interval the axes must show: all of it with whiskers, the mean alone without. */
+const fitted = (interval: Interval): Interval => (props.whiskers === false ? { ...interval, high: interval.mean, low: interval.mean } : interval)
+/**
+ * Domain each axis settles on: the nice linear domain, or the log domain. It is rounded for a fixed tick count, so it is
+ * the same on every screen; a narrow plane only shows fewer tick labels (see the domain NOTICE in `CompareDelta.vue`).
+ */
 const xTarget = computed(() => {
-  const intervals = props.points.map(point => point.x)
-  return { domain: xKind.value === 'log' ? logDomainOf(intervals, props.x) : scaleLinear(domainOf(intervals, props.x), [0, 1]).nice(xTicks.value).domain() as [number, number], kind: xKind.value }
+  const intervals = props.points.map(point => fitted(point.x))
+  return { domain: xKind.value === 'log' ? logDomainOf(intervals, props.x) : scaleLinear(domainOf(intervals, props.x), [0, 1]).nice(6).domain() as [number, number], kind: xKind.value }
 })
 const yTarget = computed(() => {
-  const intervals = props.points.map(point => point.y)
+  const intervals = props.points.map(point => fitted(point.y))
   return { domain: yKind.value === 'log' ? logDomainOf(intervals, props.y) : scaleLinear(domainOf(intervals, props.y), [0, 1]).nice(5).domain() as [number, number], kind: yKind.value }
 })
 const xDomain = useDomainTween(xTarget)
@@ -322,7 +334,7 @@ const crosshair = computed(() => {
  */
 const whiskerLabels = computed(() => {
   const mark = focused.value
-  if (mark == null)
+  if (mark == null || props.whiskers === false)
     return []
   const ends = [
     { key: 'x-low', left: xScale.value(mark.x.low), text: props.formatX(mark.x.low), top: mark.cy + 8, transform: 'translate(-50%, 0)' },
@@ -352,7 +364,7 @@ const pill = 'absolute rounded px-1 text-xs tabular-nums whitespace-nowrap point
       <path v-if="props.front.length > 1" :d="frontPath" fill="none" stroke="var(--series-1)" stroke-width="2" stroke-dasharray="4 4" opacity="0.55" pointer-events="none" />
 
       <!-- Whiskers first, so every dot and label is drawn over every whisker. -->
-      <g v-for="mark in marks" :key="`w${mark.id}`" :stroke="colorOf(mark.id)" stroke-width="1.5" pointer-events="none" :opacity="focusId == null || focusId === mark.id ? 0.35 : 0.1" :class="['transition-opacity']">
+      <g v-for="mark in props.whiskers === false ? [] : marks" :key="`w${mark.id}`" :stroke="colorOf(mark.id)" stroke-width="1.5" pointer-events="none" :opacity="focusId == null || focusId === mark.id ? 0.35 : 0.1" :class="['transition-opacity']">
         <line :x1="xScale(mark.x.low)" :x2="xScale(mark.x.high)" :y1="mark.cy" :y2="mark.cy" />
         <line :x1="xScale(mark.x.low)" :x2="xScale(mark.x.low)" :y1="mark.cy - 3" :y2="mark.cy + 3" />
         <line :x1="xScale(mark.x.high)" :x2="xScale(mark.x.high)" :y1="mark.cy - 3" :y2="mark.cy + 3" />
@@ -362,6 +374,7 @@ const pill = 'absolute rounded px-1 text-xs tabular-nums whitespace-nowrap point
       </g>
 
       <g v-for="mark in marks" :key="mark.id" :opacity="focusId == null || focusId === mark.id ? 1 : 0.35" :class="['transition-opacity cursor-pointer']" @mouseenter="isDesktop && (hovered = mark.id)" @mouseleave="hovered = undefined" @click="pin(mark.id)">
+        <circle v-if="mark.running" :cx="mark.cx" :cy="mark.cy" r="9" fill="none" stroke="var(--mark-running)" stroke-width="1.5" :class="['vv-pulse']" data-testid="compare-plane-running" />
         <circle v-if="mark.id === pinned" :cx="mark.cx" :cy="mark.cy" r="10" fill="none" :stroke="colorOf(mark.id)" stroke-width="2" opacity="0.5" />
         <!-- Front and baseline dots are filled, beaten ones hollow (filled with the card surface). -->
         <circle
@@ -408,7 +421,7 @@ const pill = 'absolute rounded px-1 text-xs tabular-nums whitespace-nowrap point
           <AnimatedContent>
             <div v-if="shown" :class="['w-72 max-w-[calc(100vw-2rem)]']">
               <ComparePointCard
-                :label="shown.mark.label" :href="shown.mark.href" :pinned="shown.pinned" :is-baseline="shown.mark.id === props.baseline"
+                :label="shown.mark.label" :running="shown.mark.running" :href="shown.mark.href" :pinned="shown.pinned" :is-baseline="shown.mark.id === props.baseline"
                 :baseline-label="props.baselineLabel" :readings="readingsOf(shown.mark)"
                 @unpin="pinned = undefined" @baseline="makeBaseline(shown.mark.id)" @hide="hide(shown.mark.id)"
               />
@@ -432,7 +445,7 @@ const pill = 'absolute rounded px-1 text-xs tabular-nums whitespace-nowrap point
           </DrawerDescription>
           <div v-if="pinnedPoint" :class="['overflow-y-auto min-h-0']">
             <ComparePointCard
-              :label="pinnedPoint.label" :href="pinnedPoint.href" pinned :is-baseline="pinnedPoint.id === props.baseline"
+              :label="pinnedPoint.label" :running="pinnedPoint.running" :href="pinnedPoint.href" pinned :is-baseline="pinnedPoint.id === props.baseline"
               :baseline-label="props.baselineLabel" :readings="readingsOf(pinnedPoint)"
               @unpin="pinned = undefined" @baseline="makeBaseline(pinnedPoint.id)" @hide="hide(pinnedPoint.id)"
             />
diff --git a/packages/ui/client/src/components/ComparePointCard.vue b/packages/ui/client/src/components/ComparePointCard.vue
index 46fa0a0..5fd52b2 100644
--- a/packages/ui/client/src/components/ComparePointCard.vue
+++ b/packages/ui/client/src/components/ComparePointCard.vue
@@ -5,6 +5,8 @@ import { TooltipContent, TooltipPortal, TooltipRoot, TooltipTrigger } from 'reka
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import StateBadge from './StateBadge.vue'
+
 /** One axis of a compared column, as the card reads it. */
 export interface PointAxisReading {
   axis: CompareAxis
@@ -31,6 +33,8 @@ const props = defineProps<{
   label: string
   pinned: boolean
   readings: readonly PointAxisReading[]
+  /** The column's newest run is still running: its numbers move as cases settle. */
+  running?: boolean
 }>()
 const emit = defineEmits<{ baseline: [], hide: [], unpin: [] }>()
 const { t } = useI18n()
@@ -63,6 +67,7 @@ function barPosition(delta: PairedDelta, value: number): number {
 <template>
   <div :class="['grid gap-2.5 text-xs']" data-testid="compare-point-card">
     <div :class="['flex items-center gap-1 min-w-0']">
+      <StateBadge v-if="props.running" state="running" icon-only />
       <span :class="['font-semibold text-sm truncate']">{{ props.label }}</span>
       <span v-if="props.isBaseline" :class="['muted shrink-0']">· {{ t('compare.chart.baselineTag') }}</span>
       <template v-if="props.pinned">
diff --git a/packages/ui/client/src/components/CompareScoreTable.test.ts b/packages/ui/client/src/components/CompareScoreTable.test.ts
new file mode 100644
index 0000000..f4976c0
--- /dev/null
+++ b/packages/ui/client/src/components/CompareScoreTable.test.ts
@@ -0,0 +1,43 @@
+import type { CompareAxis, Interval } from '../comparison'
+
+import { describe, expect, it } from 'vitest'
+import { render } from 'vitest-browser-vue'
+
+import CompareScoreTable from './CompareScoreTable.vue'
+
+/** `count` score axes and `rows` columns, every column at 50% on every axis, without a baseline. */
+function table(count: number, rows: number) {
+  const axes: CompareAxis[] = Array.from({ length: count }, (_, index) => ({ better: 'higher', kind: 'score', label: `score ${index}`, name: `score-${index}` }))
+  const columns = Array.from({ length: rows }, (_, index) => ({ id: `column-${index}`, label: `column ${index}` }))
+  const interval: Interval = { high: 0.6, low: 0.4, mean: 0.5, n: 10 }
+  const intervals = new Map(axes.map(axis => [axis.name, new Map(columns.map(column => [column.id, interval]))]))
+  return { axes, columns, deltas: new Map(), formatDelta: String, formatValue: String, intervals, sortBy: 'score-0' }
+}
+
+describe('compareScoreTable', () => {
+  /**
+   * @example
+   * expect(screen.container.querySelectorAll('tbody tr[data-hidden], tbody tr:not([aria-hidden])').length).toBeLessThan(120)
+   */
+  it('renders only the rows in view once a comparison has many columns, and scrolls both ways', async () => {
+    const screen = await render(CompareScoreTable, { props: table(30, 120) })
+    const scroller = screen.container.querySelector<HTMLElement>('[data-testid=compare-score-table]')!
+
+    expect(scroller.dataset.virtual).toBe('true')
+    expect(screen.container.querySelectorAll('tbody tr:not([aria-hidden])').length).toBeLessThan(120)
+    expect(getComputedStyle(scroller).overflow).toBe('auto')
+    expect(scroller.scrollWidth).toBeGreaterThan(scroller.clientWidth)
+  })
+
+  /**
+   * @example
+   * expect(scroller.dataset.virtual).toBeUndefined()
+   */
+  it('renders every row of a small comparison', async () => {
+    const screen = await render(CompareScoreTable, { props: table(8, 7) })
+    const scroller = screen.container.querySelector<HTMLElement>('[data-testid=compare-score-table]')!
+
+    expect(scroller.dataset.virtual).toBeUndefined()
+    expect(screen.container.querySelectorAll('tbody tr:not([aria-hidden])')).toHaveLength(7)
+  })
+})
diff --git a/packages/ui/client/src/components/CompareScoreTable.vue b/packages/ui/client/src/components/CompareScoreTable.vue
index 336b287..a8fede1 100644
--- a/packages/ui/client/src/components/CompareScoreTable.vue
+++ b/packages/ui/client/src/components/CompareScoreTable.vue
@@ -3,12 +3,14 @@ import type { CompareAxis, Interval, PairedDelta } from '../comparison'
 import type { PointAxisReading } from './ComparePointCard.vue'
 import type { HeatFill } from './HeatCell.vue'
 
-import { computed } from 'vue'
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import { computed, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ComparePointCard from './ComparePointCard.vue'
 import HeatCell from './HeatCell.vue'
 import MarginBar from './MarginBar.vue'
+import StateBadge from './StateBadge.vue'
 
 /**
  * Every column on every axis at once, in the compact matrix's anatomy: one row per column, one compact heat cell per
@@ -23,7 +25,8 @@ import MarginBar from './MarginBar.vue'
 const props = defineProps<{
   axes: readonly CompareAxis[]
   baseline?: string
-  columns: readonly { href?: string, id: string, label: string }[]
+  /** Compared columns; `running` marks one whose newest run is still running (its values move as cases settle). */
+  columns: readonly { href?: string, id: string, label: string, running?: boolean }[]
   /** Paired difference from the baseline, by axis name then column id. */
   deltas: ReadonlyMap<string, ReadonlyMap<string, PairedDelta>>
   formatDelta: (value: number, axis: CompareAxis) => string
@@ -115,81 +118,123 @@ function tallyOf(columnId: string): { better: number, worse: number } {
   const verdicts = props.axes.map(axis => verdictOf(axis, columnId))
   return { better: verdicts.filter(verdict => verdict === 'better').length, worse: verdicts.filter(verdict => verdict === 'worse').length }
 }
+/**
+ * Rows past which only the visible ones are rendered (`@tanstack/vue-virtual`, as the task page's case list does). Below
+ * it every row is in the table and the rows stretch to fill the card's height; above it rows keep their compact height.
+ */
+const VIRTUAL_ROWS = 40
+/** Height of a compact row: a 36 px heat cell and the 2 px spacing around it. */
+const ROW_PX = 38
+const scroller = useTemplateRef<HTMLElement>('scroller')
+const virtual = computed(() => rows.value.length > VIRTUAL_ROWS)
+const virtualizer = useVirtualizer(computed(() => ({
+  count: rows.value.length,
+  enabled: virtual.value,
+  estimateSize: () => ROW_PX,
+  getScrollElement: () => scroller.value ?? null,
+  overscan: 8,
+})))
+/** The rows to render, with the space above and below them that keeps the scroll height of the rows left out. */
+const visible = computed(() => {
+  if (!virtual.value)
+    return { after: 0, before: 0, rows: rows.value }
+  const items = virtualizer.value.getVirtualItems()
+  const before = items[0]?.start ?? 0
+  const after = Math.max(0, virtualizer.value.getTotalSize() - (items.at(-1)?.end ?? 0))
+  return { after, before, rows: items.map(item => rows.value[item.index]!) }
+})
 const labelOf = (columnId: string) => props.columns.find(column => column.id === columnId)?.label ?? columnId
 </script>
 
 <template>
-  <!-- A diverging ramp like the cell fills: the opposite hue for worse, the score hue for better, both fading toward the baseline. -->
-  <div v-if="props.baseline" :class="['flex items-center gap-x-4 gap-y-1.5 flex-wrap px-1 pb-2 text-xs muted']" data-testid="compare-score-legend">
-    <span :class="['inline-flex items-center gap-2']">
-      <span>{{ t('compare.chart.legend.worse') }}</span>
-      <span :class="['relative block h-2.5 w-40 rounded-sm']" :style="{ background: LEGEND_RAMP }" aria-hidden="true">
-        <span :class="['absolute inset-y-[-2px] left-1/2 w-0.5 -translate-x-1/2 rounded-full bg-neutral-500/60']" />
+  <!-- Fills the card: the legend, then the table's scroll box taking the rest of the height. -->
+  <div :class="['flex flex-col h-full min-h-0']">
+    <!-- A diverging ramp like the cell fills: the opposite hue for worse, the score hue for better, both fading toward the baseline. -->
+    <div v-if="props.baseline" :class="['flex items-center gap-x-4 gap-y-1.5 flex-wrap px-1 pb-2 text-xs muted']" data-testid="compare-score-legend">
+      <span :class="['inline-flex items-center gap-2']">
+        <span>{{ t('compare.chart.legend.worse') }}</span>
+        <span :class="['relative block h-2.5 w-40 rounded-sm']" :style="{ background: LEGEND_RAMP }" aria-hidden="true">
+          <span :class="['absolute inset-y-[-2px] left-1/2 w-0.5 -translate-x-1/2 rounded-full bg-neutral-500/60']" />
+        </span>
+        <span>{{ t('compare.chart.legend.better') }}</span>
       </span>
-      <span>{{ t('compare.chart.legend.better') }}</span>
-    </span>
-    <span :class="['inline-flex items-center gap-1.5']"><span :class="['size-3 rounded-sm outline-2 -outline-offset-2 outline-dashed outline-neutral-400/70 dark:outline-neutral-500/70']" />{{ t('compare.chart.legend.baseline') }}</span>
-    <span>{{ t('compare.chart.legend.direction') }}</span>
-  </div>
-  <div :class="['overflow-x-auto']" data-testid="compare-score-table">
-    <table :class="['border-separate border-spacing-0.5 text-sm']">
-      <thead>
-        <tr>
-          <th :class="['th sticky left-0 z-1 bg-white dark:bg-neutral-900 text-left']" />
-          <th v-for="axis in props.axes" :key="axis.name" :class="['th text-xs font-normal whitespace-nowrap text-center!']">
-            <button type="button" :class="['inline-flex items-center gap-0.5 hover:text-primary-600 dark:hover:text-primary-300', axis.name === sortBy && 'font-semibold text-neutral-900 dark:text-neutral-100']" :title="t('compare.chart.sortBy', { axis: axis.label })" @click="sortBy = axis.name">
-              {{ axis.label }}<span v-if="axis.name === sortBy" class="i-mingcute-arrow-down-line" aria-hidden="true" />
-            </button>
-          </th>
-          <th :class="['th text-xs font-normal whitespace-nowrap pl-4!']">
-            {{ t('compare.chart.tally') }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="column in rows" :key="column.id" :class="['group transition-opacity duration-200', isHidden(column.id) && 'opacity-40']" :data-hidden="isHidden(column.id) || undefined">
-          <th scope="row" :class="['sticky left-0 z-1 bg-white dark:bg-neutral-900 pr-1 text-xs font-normal text-left whitespace-nowrap max-w-52']" :title="column.label">
-            <span :class="['flex items-center gap-1 min-w-0']">
-              <span :class="['truncate']"><a v-if="column.href" :href="column.href" :class="['link']">{{ column.label }}</a><span v-else>{{ column.label }}</span></span>
-              <span v-if="column.id === props.baseline" :class="['muted shrink-0']">· {{ t('compare.chart.baselineTag') }}</span>
-              <!-- Hiding an outlier lets the others spread over the color scale; the baseline cannot be hidden. -->
-              <button
-                v-else type="button" :class="['icon-btn size-6! text-sm! ml-auto focus-visible:opacity-100', isHidden(column.id) ? 'opacity-100' : 'opacity-0 group-hover:opacity-100']"
-                :aria-label="isHidden(column.id) ? t('compare.chart.show', { column: column.label }) : t('compare.chart.card.hide')"
-                :title="isHidden(column.id) ? t('compare.chart.show', { column: column.label }) : t('compare.chart.card.hide')"
-                data-testid="compare-score-hide" @click="emit('hide', column.id, !isHidden(column.id))"
-              >
-                <span :class="[isHidden(column.id) ? 'i-mingcute-eye-line' : 'i-mingcute-eye-close-line']" aria-hidden="true" />
+      <span :class="['inline-flex items-center gap-1.5']"><span :class="['size-3 rounded-sm outline-2 -outline-offset-2 outline-dashed outline-neutral-400/70 dark:outline-neutral-500/70']" />{{ t('compare.chart.legend.baseline') }}</span>
+      <span>{{ t('compare.chart.legend.direction') }}</span>
+    </div>
+    <!--
+    Scrolls both ways once the table outgrows the card (many scores across, many columns down), with the header row and
+    the name column pinned. The table takes the full width, the name and margin columns only what they need, so the
+    score columns share the rest.
+  -->
+    <div ref="scroller" :class="['flex-1 min-h-0 max-h-[70vh] overflow-auto']" data-testid="compare-score-table" :data-virtual="virtual || undefined">
+      <table :class="['w-full border-separate border-spacing-0.5 text-sm', !virtual && 'h-full']">
+        <thead>
+          <tr>
+            <th :class="['th sticky left-0 top-0 z-3 w-px bg-white dark:bg-neutral-900 text-left']" />
+            <th v-for="axis in props.axes" :key="axis.name" :class="['th sticky top-0 z-2 bg-white dark:bg-neutral-900 text-xs font-normal whitespace-nowrap text-center!']">
+              <button type="button" :class="['inline-flex items-center gap-0.5 hover:text-primary-600 dark:hover:text-primary-300', axis.name === sortBy && 'font-semibold text-neutral-900 dark:text-neutral-100']" :title="t('compare.chart.sortBy', { axis: axis.label })" @click="sortBy = axis.name">
+                {{ axis.label }}<span v-if="axis.name === sortBy" class="i-mingcute-arrow-down-line" aria-hidden="true" />
               </button>
-            </span>
-          </th>
-          <td v-for="axis in props.axes" :key="axis.name">
-            <HeatCell
-              v-if="props.intervals.get(axis.name)?.get(column.id)"
-              fit
-              :text="column.id === props.baseline || !props.deltas.get(axis.name)?.get(column.id)
-                ? props.formatValue(props.intervals.get(axis.name)!.get(column.id)!.mean, axis)
-                : props.formatDelta(props.deltas.get(axis.name)!.get(column.id)!.interval.mean, axis)"
-              :fill="fillOf(axis, column.id)" :is-base="column.id === props.baseline"
-              :best="!isHidden(column.id) && bestOf.get(axis.name) === column.id"
-              test-id="compare-score-cell"
-            >
-              <template #detail>
-                <div :class="['w-72 max-w-[calc(100vw-2rem)] p-3']">
-                  <ComparePointCard :label="labelOf(column.id)" :is-baseline="column.id === props.baseline" :pinned="false" :baseline-label="props.baseline ? labelOf(props.baseline) : undefined" :readings="readingOf(axis, column.id)" />
-                </div>
-              </template>
-            </HeatCell>
-            <HeatCell v-else fit empty text="—" />
-          </td>
-          <!-- The margin: axes better and worse than the baseline beyond noise, as a bar around zero. -->
-          <td :class="['pl-4 pr-1']">
-            <span v-if="column.id !== props.baseline" :class="['flex items-center gap-2 text-xs tabular-nums muted whitespace-nowrap']" data-testid="compare-score-tally">
-              <MarginBar :value="tallyOf(column.id).better - tallyOf(column.id).worse" :scale="props.axes.length" diverging />{{ t('compare.chart.tallyValue', { better: tallyOf(column.id).better, worse: tallyOf(column.id).worse }) }}
-            </span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+            </th>
+            <th :class="['th sticky top-0 z-2 w-px bg-white dark:bg-neutral-900 text-xs font-normal whitespace-nowrap pl-4!']">
+              {{ t('compare.chart.tally') }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="visible.before > 0" aria-hidden="true" :style="{ height: `${visible.before}px` }" />
+          <tr
+            v-for="column in visible.rows" :key="column.id"
+            :class="['group transition-opacity duration-200', isHidden(column.id) && 'opacity-40']" :data-hidden="isHidden(column.id) || undefined"
+            :style="virtual ? { height: `${ROW_PX}px` } : undefined"
+          >
+            <th scope="row" :class="['sticky left-0 z-1 bg-white dark:bg-neutral-900 pr-1 text-xs font-normal text-left whitespace-nowrap max-w-52']" :title="column.label">
+              <span :class="['flex items-center gap-1 min-w-0']">
+                <StateBadge v-if="column.running" state="running" icon-only />
+                <span :class="['truncate']"><a v-if="column.href" :href="column.href" :class="['link']">{{ column.label }}</a><span v-else>{{ column.label }}</span></span>
+                <span v-if="column.id === props.baseline" :class="['muted shrink-0']">· {{ t('compare.chart.baselineTag') }}</span>
+                <!-- Hiding an outlier lets the others spread over the color scale; the baseline cannot be hidden. -->
+                <button
+                  v-else type="button" :class="['icon-btn size-6! text-sm! ml-auto focus-visible:opacity-100', isHidden(column.id) ? 'opacity-100' : 'opacity-0 group-hover:opacity-100']"
+                  :aria-label="isHidden(column.id) ? t('compare.chart.show', { column: column.label }) : t('compare.chart.card.hide')"
+                  :title="isHidden(column.id) ? t('compare.chart.show', { column: column.label }) : t('compare.chart.card.hide')"
+                  data-testid="compare-score-hide" @click="emit('hide', column.id, !isHidden(column.id))"
+                >
+                  <span :class="[isHidden(column.id) ? 'i-mingcute-eye-line' : 'i-mingcute-eye-close-line']" aria-hidden="true" />
+                </button>
+              </span>
+            </th>
+            <!-- NOTICE: `h-px` gives the cell a definite height, so the heat cell's `h-full` resolves to the row's height (a
+               percentage height inside a table cell of `auto` height is ignored), as in `MatrixTable.vue`. -->
+            <td v-for="axis in props.axes" :key="axis.name" :class="['h-px']">
+              <HeatCell
+                v-if="props.intervals.get(axis.name)?.get(column.id)"
+                fit
+                :text="column.id === props.baseline || !props.deltas.get(axis.name)?.get(column.id)
+                  ? props.formatValue(props.intervals.get(axis.name)!.get(column.id)!.mean, axis)
+                  : props.formatDelta(props.deltas.get(axis.name)!.get(column.id)!.interval.mean, axis)"
+                :fill="fillOf(axis, column.id)" :is-base="column.id === props.baseline"
+                :best="!isHidden(column.id) && bestOf.get(axis.name) === column.id"
+                test-id="compare-score-cell"
+              >
+                <template #detail>
+                  <div :class="['w-72 max-w-[calc(100vw-2rem)] p-3']">
+                    <ComparePointCard :label="labelOf(column.id)" :is-baseline="column.id === props.baseline" :pinned="false" :baseline-label="props.baseline ? labelOf(props.baseline) : undefined" :readings="readingOf(axis, column.id)" />
+                  </div>
+                </template>
+              </HeatCell>
+              <HeatCell v-else fit empty text="—" />
+            </td>
+            <!-- The margin: axes better and worse than the baseline beyond noise, as a bar around zero. -->
+            <td :class="['w-px pl-4 pr-1']">
+              <span v-if="column.id !== props.baseline" :class="['flex items-center gap-2 text-xs tabular-nums muted whitespace-nowrap']" data-testid="compare-score-tally">
+                <MarginBar :value="tallyOf(column.id).better - tallyOf(column.id).worse" :scale="props.axes.length" diverging />{{ t('compare.chart.tallyValue', { better: tallyOf(column.id).better, worse: tallyOf(column.id).worse }) }}
+              </span>
+            </td>
+          </tr>
+          <tr v-if="visible.after > 0" aria-hidden="true" :style="{ height: `${visible.after}px` }" />
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
diff --git a/packages/ui/client/src/components/HeatCell.vue b/packages/ui/client/src/components/HeatCell.vue
index fbb7716..9074b2f 100644
--- a/packages/ui/client/src/components/HeatCell.vue
+++ b/packages/ui/client/src/components/HeatCell.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
-import { HoverCardArrow, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger } from 'reka-ui'
-import { computed } from 'vue'
+import { useMediaQuery } from '@vueuse/core'
+import { HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger } from 'reka-ui'
+import { DrawerContent, DrawerDescription, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTitle } from 'vaul-vue'
+import { computed, shallowRef, useSlots } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import AnimatedContent from './AnimatedContent.vue'
 
@@ -51,6 +54,18 @@ defineSlots<{
   detail?: () => unknown
 }>()
 
+const { t } = useI18n()
+const slots = useSlots()
+const isDesktop = useMediaQuery('(min-width: 768px)')
+/** The phone drawer of the cell's details. */
+const open = shallowRef(false)
+function tap(event: MouseEvent): void {
+  if (slots.detail == null)
+    return
+  event.preventDefault()
+  open.value = true
+}
+
 const style = computed(() => {
   if (props.fill == null || props.isBase)
     return undefined
@@ -58,27 +73,34 @@ const style = computed(() => {
   const hue = props.fill.hue === 'loss' ? 'var(--series-1-opposite)' : 'var(--series-1)'
   return { background: `color-mix(in oklab, ${hue} ${props.fill.faint ? Math.min(mix, 18) : mix}%, transparent)` }
 })
+/** Attributes of the cell element, shared by the desktop (hover card) and phone (drawer) variants. */
+const cell = computed(() => ({
+  'class': [
+    'relative flex items-center justify-center rounded-md tabular-nums transition-[outline-color]',
+    'outline-2 -outline-offset-2 outline outline-transparent hover:outline-neutral-500/50 focus-visible:outline-primary-500',
+    props.dense ? 'w-10 h-7 text-[11px]' : 'text-sm',
+    // A fitted cell fills its table cell both ways (at least a compact cell), so a table can stretch to its card.
+    !props.dense && (props.fit ? 'min-w-15 w-full min-h-9 h-full px-1.5 whitespace-nowrap' : 'w-15 h-9'),
+    (props.empty || (props.fill == null && !props.isBase)) && 'bg-neutral-500/10 muted',
+    props.isBase && 'muted outline-dashed',
+    // One outline color per cell, so a cell never carries two competing `!` colors: the best cell (a baseline one keeps
+    // its dashes) in the theme hue at half strength, 700 on light pages and 200 on dark ones. It previously used neutral
+    // black and white, then full 900 / 100, 600 / 300, and 400 / 500 shades, which all read as heavier than the fills.
+    props.best ? 'font-semibold outline-primary-700/50! dark:outline-primary-200/50!' : props.isBase && 'outline-neutral-400/70! dark:outline-neutral-500/70!',
+  ],
+  'data-testid': props.testId,
+  'href': props.href,
+  'style': style.value,
+  'tabindex': props.href ? undefined : 0,
+}))
 </script>
 
 <template>
-  <HoverCardRoot :open-delay="250" :close-delay="80">
+  <!-- Opens at once, as the plane's and the axis pickers' cards do; the short close delay lets the pointer move into it.
+       No arrow: it was a fill without the card's border, so it read as a separate shape beside the card. -->
+  <HoverCardRoot v-if="isDesktop" :open-delay="0" :close-delay="80">
     <HoverCardTrigger as-child>
-      <component
-        :is="props.href ? 'a' : 'span'"
-        :href="props.href"
-        :tabindex="props.href ? undefined : 0"
-        :class="[
-          'relative flex items-center justify-center rounded-md tabular-nums transition-[outline-color]',
-          'outline-2 -outline-offset-2 outline outline-transparent hover:outline-neutral-500/50 focus-visible:outline-primary-500',
-          props.dense ? 'w-10 h-7 text-[11px]' : 'h-9 text-sm',
-          !props.dense && (props.fit ? 'min-w-15 w-full px-1.5 whitespace-nowrap' : 'w-15'),
-          (props.empty || (props.fill == null && !props.isBase)) && 'bg-neutral-500/10 muted',
-          props.isBase && 'muted outline-dashed outline-neutral-400/70! dark:outline-neutral-500/70!',
-          props.best && 'font-semibold outline-neutral-900! dark:outline-neutral-100!',
-        ]"
-        :style="style"
-        :data-testid="props.testId"
-      >
+      <component :is="props.href ? 'a' : 'span'" v-bind="cell">
         {{ props.text }}
         <slot />
       </component>
@@ -87,9 +109,36 @@ const style = computed(() => {
       <HoverCardContent as-child side="right" align="start" :side-offset="6" :collision-padding="8" :class="['floating']">
         <AnimatedContent>
           <slot name="detail" />
-          <HoverCardArrow :class="['floating-arrow']" />
         </AnimatedContent>
       </HoverCardContent>
     </HoverCardPortal>
   </HoverCardRoot>
+  <!-- Phones have no hover: a tap opens the same details in a bottom drawer (the link, if any, moves into it), and the
+       tapped cell stays outlined while the drawer is open, as the plane's dots do. -->
+  <template v-else>
+    <component :is="props.href && !$slots.detail ? 'a' : 'span'" v-bind="cell" :class="[open && 'outline-primary-500!']" @click="tap">
+      {{ props.text }}
+      <slot />
+    </component>
+    <DrawerRoot v-if="$slots.detail" v-model:open="open">
+      <DrawerPortal>
+        <DrawerOverlay :class="['fixed inset-0 z-50 bg-black/40']" />
+        <DrawerContent :class="['floating fixed inset-x-0 bottom-0 max-h-[85dvh] flex flex-col gap-3 rounded-b-none! rounded-t-2xl! border-b-0! px-4 pt-3 pb-6 outline-none']">
+          <DrawerHandle :class="['bg-neutral-300! dark:bg-neutral-600!']" />
+          <DrawerTitle :class="['sr-only']">
+            {{ props.text }}
+          </DrawerTitle>
+          <DrawerDescription :class="['sr-only']">
+            {{ t('common.cellDetails') }}
+          </DrawerDescription>
+          <div :class="['overflow-y-auto min-h-0']">
+            <slot name="detail" />
+          </div>
+          <a v-if="props.href" :href="props.href" :class="['btn justify-center py-2.5! text-sm! font-medium bg-primary-500/15! text-primary-800! dark:text-primary-200!']">
+            <span class="i-mingcute-arrow-right-up-line" aria-hidden="true" />{{ t('common.open') }}
+          </a>
+        </DrawerContent>
+      </DrawerPortal>
+    </DrawerRoot>
+  </template>
 </template>
diff --git a/packages/ui/client/src/i18n/locales/en/common.ts b/packages/ui/client/src/i18n/locales/en/common.ts
index 0a05cb4..815a563 100644
--- a/packages/ui/client/src/i18n/locales/en/common.ts
+++ b/packages/ui/client/src/i18n/locales/en/common.ts
@@ -1,5 +1,6 @@
 /** Words shared by every page: buttons, and the loading, empty, and error states of `StateView`. */
 export default {
+  cellDetails: 'Details of the cell',
   choice: {
     description: 'Pick one; the info button shows what each choice would look like',
     details: 'Preview {choice}',
@@ -9,6 +10,7 @@ export default {
   empty: 'Nothing here yet',
   loading: 'Loading…',
   notFound: 'Not found',
+  open: 'Open',
   requestFailed: 'Request failed',
   requestFailedStatus: 'Request failed ({status})',
   retry: 'Retry',
diff --git a/packages/ui/client/src/i18n/locales/en/compare.ts b/packages/ui/client/src/i18n/locales/en/compare.ts
index fc43a82..9bf9901 100644
--- a/packages/ui/client/src/i18n/locales/en/compare.ts
+++ b/packages/ui/client/src/i18n/locales/en/compare.ts
@@ -35,8 +35,11 @@ export default {
     },
     meanValue: 'mean {value}',
     planeAria: 'Columns by {x} and {y}',
-    planeNote: 'Whiskers are 95% intervals of each mean over its cases. Hover a dot for its intervals; click to pin it.',
-    planeNoteFront: 'Whiskers are 95% intervals of each mean over its cases. Hover a dot for its intervals; click to pin it. Filled dots on the dashed line are the Pareto front: no other column beats them on both axes.',
+    planeNote: {
+      front: 'Filled dots on the dashed line are the Pareto front: no other column beats them on both axes.',
+      hover: 'Hover a dot for its intervals; click to pin it.',
+      whiskers: 'Whiskers are 95% intervals of each mean over its cases.',
+    },
     planeTitle: 'Two-axis distribution',
     points: '{n} pt',
     scale: {
@@ -55,6 +58,7 @@ export default {
       noise: 'Within noise of the baseline',
       worse: 'Worse than the baseline beyond noise',
     },
+    whiskers: 'Whiskers',
     winsLosses: '{wins} better · {losses} worse · {ties} equal of {n} cases',
     winsLossesShort: '{wins}↑ {losses}↓ {ties}=',
     x: 'X',
diff --git a/packages/ui/client/src/i18n/locales/zh-Hans/common.ts b/packages/ui/client/src/i18n/locales/zh-Hans/common.ts
index 7210cd5..31609e9 100644
--- a/packages/ui/client/src/i18n/locales/zh-Hans/common.ts
+++ b/packages/ui/client/src/i18n/locales/zh-Hans/common.ts
@@ -1,6 +1,7 @@
 import type en from '../en/common'
 
 export default {
+  cellDetails: '单元格详情',
   choice: {
     description: '选择一项；信息按钮可以预览每个选项的效果',
     details: '预览 {choice}',
@@ -10,6 +11,7 @@ export default {
   empty: '暂无内容',
   loading: '加载中…',
   notFound: '未找到',
+  open: '打开',
   requestFailed: '请求失败',
   requestFailedStatus: '请求失败（{status}）',
   retry: '重试',
diff --git a/packages/ui/client/src/i18n/locales/zh-Hans/compare.ts b/packages/ui/client/src/i18n/locales/zh-Hans/compare.ts
index 8c2a388..a05213a 100644
--- a/packages/ui/client/src/i18n/locales/zh-Hans/compare.ts
+++ b/packages/ui/client/src/i18n/locales/zh-Hans/compare.ts
@@ -36,8 +36,11 @@ export default {
     },
     meanValue: '均值 {value}',
     planeAria: '各列在 {x} 和 {y} 上的位置',
-    planeNote: '误差线是每个均值基于其用例的 95% 置信区间。悬停查看区间，点击固定。',
-    planeNoteFront: '误差线是每个均值基于其用例的 95% 置信区间。悬停查看区间，点击固定。虚线上的实心点是帕累托前沿：没有其他列在两个轴上都比它们好。',
+    planeNote: {
+      front: '虚线上的实心点是帕累托前沿：没有其他列在两个轴上都比它们好。',
+      hover: '悬停查看区间，点击固定。',
+      whiskers: '误差线是每个均值基于其用例的 95% 置信区间。',
+    },
     planeTitle: '二维分布',
     points: '{n} 分',
     scale: {
@@ -56,6 +59,7 @@ export default {
       noise: '与基线的差距在噪声范围内',
       worse: '超出噪声范围，差于基线',
     },
+    whiskers: '误差线',
     winsLosses: '{n} 个用例中 {wins} 个更好 · {losses} 个更差 · {ties} 个持平',
     winsLossesShort: '{wins}↑ {losses}↓ {ties}=',
     x: 'X 轴',
diff --git a/packages/ui/client/src/pages/ComparePage.vue b/packages/ui/client/src/pages/ComparePage.vue
index bab2e75..be081d2 100644
--- a/packages/ui/client/src/pages/ComparePage.vue
+++ b/packages/ui/client/src/pages/ComparePage.vue
@@ -174,6 +174,10 @@ function columnHref(column: ComparisonResponse['columns'][number]) {
   const run = column.runs.at(-1)
   return run && view.value !== 'matrix' ? href({ name: 'run', runKey: run.runKey }) : undefined
 }
+/** A column whose newest run is still running: its means move as cases settle, and the charts say so. */
+function isRunning(column: ComparisonResponse['columns'][number]): boolean {
+  return column.runs.at(-1)?.state === 'running'
+}
 
 /** Scores, metrics, and the duration the charts can be read by (see {@link compareAxes}). */
 const axes = computed(() => (result.value == null ? [] : compareAxes(result.value)))
@@ -250,6 +254,8 @@ const axisOf = (name: string) => axes.value.find(axis => axis.name === name)
  * Scale of each axis of the plane: linear, or log when every column mean on the axis is above 0. A log pick that no
  * longer fits its axis (another axis chosen) reads as linear.
  */
+/** Whether the plane draws the 95% interval of each mean; without them its axes fit the means alone. */
+const showWhiskers = shallowRef(true)
 const pickedXScale = shallowRef<ScaleKind>('linear')
 const pickedYScale = shallowRef<ScaleKind>('linear')
 const logX = computed(() => xAxis.value != null && canLogScale(intervals.value.get(xAxis.value.name)?.values() ?? []))
@@ -270,7 +276,7 @@ const planePoints = computed<PlanePoint[]>(() => {
     const xi = intervals.value.get(x.name)?.get(column.id)
     const yi = intervals.value.get(y.name)?.get(column.id)
     const delta = { x: deltas.value.get(x.name)?.get(column.id), y: deltas.value.get(y.name)?.get(column.id) }
-    return xi == null || yi == null ? [] : [{ delta, href: columnHref(column), id: column.id, label: columnLabel(column), x: xi, y: yi }]
+    return xi == null || yi == null ? [] : [{ delta, href: columnHref(column), id: column.id, label: columnLabel(column), running: isRunning(column), x: xi, y: yi }]
   })
 })
 const front = computed(() => (xAxis.value == null || yAxis.value == null || xAxis.value === yAxis.value
@@ -285,17 +291,17 @@ const deltaRows = computed<DeltaRow[]>(() => {
   return (result.value?.columns ?? []).flatMap((column) => {
     const delta = deltas.value.get(y.name)?.get(column.id)
     const value = intervals.value.get(y.name)?.get(column.id)
-    return delta == null || value == null ? [] : [{ delta, hidden: hidden.value.has(column.id), href: columnHref(column), label: columnLabel(column), value }]
+    return delta == null || value == null ? [] : [{ delta, hidden: hidden.value.has(column.id), href: columnHref(column), label: columnLabel(column), running: isRunning(column), value }]
   }).sort((left, right) => sign * (left.delta.interval.mean - right.delta.interval.mean))
 })
 /** The baseline's own row of the difference chart: its mean on the y axis. */
 const deltaBaseline = computed(() => {
   const column = result.value?.columns.find(item => item.id === baseline.value)
   const value = yAxis.value == null || column == null ? undefined : intervals.value.get(yAxis.value.name)?.get(column.id)
-  return column == null || value == null ? undefined : { href: columnHref(column), label: columnLabel(column), value }
+  return column == null || value == null ? undefined : { href: columnHref(column), label: columnLabel(column), running: isRunning(column), value }
 })
 const caseLabels = computed(() => new Map((result.value?.rows ?? []).map(row => [rowKey(row), row.variant == null ? row.caseName : `${row.caseName} · ${row.variant}`])))
-const tableColumns = computed(() => (result.value?.columns ?? []).map(column => ({ href: columnHref(column), id: column.id, label: columnLabel(column) })))
+const tableColumns = computed(() => (result.value?.columns ?? []).map(column => ({ href: columnHref(column), id: column.id, label: columnLabel(column), running: isRunning(column) })))
 
 /**
  * Graders of the primary score per column, when they differ in kind, model, or version: the values then do not
@@ -474,26 +480,32 @@ const position = computed(() => ({ experiment: query.value.experiment, project:
             <span :class="['ml-auto flex items-center gap-1 -my-1']" data-testid="compare-plane-toolbar">
               <ChoiceMenu v-if="logY" size="sm" :model-value="yScaleKind" :choices="scaleChoices" :label="t('compare.chart.scale.y')" test-id="compare-scale-y" @update:model-value="value => pickedYScale = value as ScaleKind" />
               <ChoiceMenu v-if="logX" size="sm" :model-value="xScaleKind" :choices="scaleChoices" :label="t('compare.chart.scale.x')" test-id="compare-scale-x" @update:model-value="value => pickedXScale = value as ScaleKind" />
+              <button
+                type="button" :class="['option-trigger gap-1! rounded-md! px-2! py-0.5! text-xs! font-normal']" :aria-pressed="showWhiskers"
+                data-testid="compare-whiskers" @click="showWhiskers = !showWhiskers"
+              >
+                <span :class="[showWhiskers ? 'i-mingcute-check-line' : 'i-mingcute-close-line', 'muted']" aria-hidden="true" />{{ t('compare.chart.whiskers') }}
+              </button>
             </span>
           </h2>
           <div class="p-3">
             <ComparePlane
-              :points="planePoints" :x="xAxis" :y="yAxis" :x-scale-kind="xScaleKind" :y-scale-kind="yScaleKind" :front="front" :baseline="baseline" :baseline-label="deltaBaseline?.label"
+              :points="planePoints" :x="xAxis" :y="yAxis" :x-scale-kind="xScaleKind" :y-scale-kind="yScaleKind" :whiskers="showWhiskers" :front="front" :baseline="baseline" :baseline-label="deltaBaseline?.label"
               :format-x="value => formatValue(value, xAxis!)" :format-y="value => formatValue(value, yAxis!)"
               :format-delta-x="value => formatDelta(value, xAxis!)" :format-delta-y="value => formatDelta(value, yAxis!)"
               @baseline="id => pickedBaseline = id" @hide="id => setHidden(id, true)"
             />
             <p :class="['mt-1 text-xs muted']">
-              {{ front.length > 0 ? t('compare.chart.planeNoteFront') : t('compare.chart.planeNote') }}
+              {{ [showWhiskers && t('compare.chart.planeNote.whiskers'), t('compare.chart.planeNote.hover'), front.length > 0 && t('compare.chart.planeNote.front')].filter(Boolean).join(' ') }}
             </p>
           </div>
         </section>
 
-        <section v-if="axes.length > 2" :class="['card mb-4 min-w-0']">
+        <section v-if="axes.length > 2" :class="['card mb-4 min-w-0 flex flex-col']">
           <h2 class="card-title">
             <span class="i-mingcute-table-2-line" aria-hidden="true" />{{ t('compare.chart.tableTitle') }}
           </h2>
-          <div class="p-2">
+          <div :class="['p-2 flex-1 min-h-0']">
             <CompareScoreTable
               :sort-by="yAxis.name" :axes="axes" :columns="tableColumns" :hidden="hidden" :baseline="baseline" :intervals="intervals" :deltas="deltas"
               :format-value="formatValue" :format-delta="formatDelta"
@@ -536,7 +548,9 @@ const position = computed(() => ({ experiment: query.value.experiment, project:
               </tr>
             </thead>
             <tbody>
-              <tr v-for="row in rows" :key="rowKey(row)" :class="['border-b border-neutral-100/70 dark:border-neutral-900', row.changed && 'bg-amber-50/60 dark:bg-amber-950/30']">
+              <!-- A differing row is marked by its icon only: with several columns nearly every case differs somewhere, and a tint
+                   on every row (it previously had one) pointed at nothing. "Only differing" narrows the list instead. -->
+              <tr v-for="row in rows" :key="rowKey(row)" :class="['border-b border-neutral-100/70 dark:border-neutral-900']">
                 <td :class="['td mono text-xs break-all max-md:min-w-40']">
                   <span v-if="row.changed" class="i-mingcute-git-compare-line text-amber-600 mr-1" :title="t('compare.result.differs')" />{{ row.caseName }}<span v-if="row.variant" :class="['ml-1.5 font-sans muted']">{{ row.variant }}</span>
                 </td>