From d0d24c8f6acae91ffd7d51913cf09b258eb6f7ac Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Wed, 21 Oct 2026 07:55:30 +0800
Subject: [PATCH] fix(ui): lay out the viewer for phones and narrow cards

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/components/CaseMetricsPanel.vue       |  5 +-
 .../ui/client/src/components/InfoButton.vue   | 63 +++++++++++++++++++
 .../ui/client/src/components/LineChart.vue    |  4 +-
 .../ui/client/src/components/PageHeader.vue   | 19 +++---
 .../client/src/components/ProgressPanel.vue   | 10 ++-
 .../client/src/components/RunDetails.test.ts  |  6 +-
 .../ui/client/src/components/RunDetails.vue   | 46 +++++++-------
 .../ui/client/src/components/ScoresPanel.vue  | 30 ++++++---
 .../ui/client/src/pages/ExperimentPage.vue    | 39 +++++++-----
 packages/ui/client/src/pages/ProjectPage.vue  | 40 ++++++------
 packages/ui/client/src/pages/RunPage.vue      | 11 ++--
 11 files changed, 183 insertions(+), 90 deletions(-)
 create mode 100644 packages/ui/client/src/components/InfoButton.vue

diff --git a/packages/ui/client/src/components/CaseMetricsPanel.vue b/packages/ui/client/src/components/CaseMetricsPanel.vue
index edee06f..bed388d 100644
--- a/packages/ui/client/src/components/CaseMetricsPanel.vue
+++ b/packages/ui/client/src/components/CaseMetricsPanel.vue
@@ -521,10 +521,11 @@ const formatOf = (name: string, value: number) => formatColumnValue(value, metri
       <span class="text-xs muted font-normal">every case against its recorded metrics</span>
     </h2>
     <StateView :error="metrics.error.value" :loading="metrics.isPending.value" :empty="table.rows.length === 0" empty-text="No cases yet" @retry="metrics.refetch()">
-      <div :class="['grid gap-3 p-3']">
+      <!-- `minmax(0,1fr)`: a chart wider than the card scrolls inside its own wrapper instead of widening the grid. -->
+      <div :class="['grid grid-cols-[minmax(0,1fr)] gap-3 p-3']">
         <!-- One toolbar row: the axes behind a button, the color, and what the selection holds. -->
         <div :class="['flex flex-wrap items-center gap-x-2 gap-y-2 text-xs select-none']">
-          <SegmentedControl v-if="views.length > 0" v-model="view" :items="views" label="View" size="md" />
+          <SegmentedControl v-if="views.length > 0" v-model="view" :items="views" label="View" :size="isDesktop ? 'md' : 'sm'" />
           <AxisPicker v-model:metrics="numericAxes" v-model:categories="categoryAxes" :definition-of="name => metricDefinition(name, definitions)" :label-of="labelOf" :separation="separation" :table="table" :values-of="valuesOf" />
           <DropdownMenuRoot @update:open="open => { if (!open) highlightedColor = undefined }">
             <DropdownMenuTrigger :class="['option-trigger max-w-60']" data-testid="color-by">
diff --git a/packages/ui/client/src/components/InfoButton.vue b/packages/ui/client/src/components/InfoButton.vue
new file mode 100644
index 0000000..3836dd0
--- /dev/null
+++ b/packages/ui/client/src/components/InfoButton.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+import { PopoverArrow, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui'
+import { DrawerContent, DrawerDescription, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTitle } from 'vaul-vue'
+import { shallowRef } from 'vue'
+
+import AnimatedContent from './AnimatedContent.vue'
+
+/**
+ * An "ⓘ" icon button that opens secondary facts the page does not print inline (raw identifiers, how a number is
+ * computed). A popover on desktop, a bottom drawer on phones, with the same body from the default slot.
+ *
+ * Use when:
+ * - a fact helps when asked for but would crowd the layout, especially on phones
+ */
+const props = defineProps<{
+  /** What the facts are about (`Run details`): the button's accessible name and the drawer's title. */
+  label: string
+}>()
+
+const isDesktop = useMediaQuery('(min-width: 768px)')
+const open = shallowRef(false)
+const trigger = ['icon-btn', 'size-6! text-sm! muted']
+</script>
+
+<template>
+  <PopoverRoot v-if="isDesktop" v-model:open="open">
+    <PopoverTrigger :class="trigger" :aria-label="props.label" :title="props.label" data-testid="info-button">
+      <span class="i-mingcute-information-line" aria-hidden="true" />
+    </PopoverTrigger>
+    <PopoverPortal>
+      <PopoverContent as-child align="start" :side-offset="6" :collision-padding="12" :class="['floating p-3 text-xs font-normal select-text outline-none']">
+        <AnimatedContent>
+          <!-- The content scrolls inside: `AnimatedContent` clips its own root. -->
+          <div :class="['w-96 max-w-[calc(100vw-2rem)] max-h-[min(32rem,var(--reka-popover-content-available-height))] overflow-y-auto']">
+            <slot />
+          </div>
+          <PopoverArrow :class="['floating-arrow']" />
+        </AnimatedContent>
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+  <DrawerRoot v-else v-model:open="open">
+    <button type="button" :class="trigger" :aria-label="props.label" :title="props.label" data-testid="info-button" @click="open = true">
+      <span class="i-mingcute-information-line" aria-hidden="true" />
+    </button>
+    <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 text-sm font-normal outline-none']">
+        <DrawerHandle :class="['bg-neutral-300! dark:bg-neutral-600!']" />
+        <DrawerTitle :class="['text-sm font-semibold']">
+          {{ props.label }}
+        </DrawerTitle>
+        <DrawerDescription :class="['sr-only']">
+          {{ props.label }}
+        </DrawerDescription>
+        <div :class="['overflow-y-auto min-h-0']">
+          <slot />
+        </div>
+      </DrawerContent>
+    </DrawerPortal>
+  </DrawerRoot>
+</template>
diff --git a/packages/ui/client/src/components/LineChart.vue b/packages/ui/client/src/components/LineChart.vue
index efe97c3..ef743dc 100644
--- a/packages/ui/client/src/components/LineChart.vue
+++ b/packages/ui/client/src/components/LineChart.vue
@@ -31,7 +31,9 @@ const bounds = computed(() => {
   const x = extent(props.points.map(point => point.x))
   const y = extent(props.points.map(point => point.y))
   const minY = Math.min(0, y.min)
-  const maxY = Math.max(y.max, minY + 1e-9)
+  // A constant series (every value 0, say) has no range: one unit above the floor keeps the axis readable (`0`–`1`)
+  // instead of labelling both ends `0`.
+  const maxY = y.max > minY ? y.max : minY + 1
   return { maxX: x.max, maxY, minX: x.min, minY }
 })
 function sx(x: number) {
diff --git a/packages/ui/client/src/components/PageHeader.vue b/packages/ui/client/src/components/PageHeader.vue
index 1da00f0..fe9b8ae 100644
--- a/packages/ui/client/src/components/PageHeader.vue
+++ b/packages/ui/client/src/components/PageHeader.vue
@@ -57,11 +57,12 @@ const siblings = computed(() => {
 <template>
   <header :class="['flex flex-col gap-2 pb-3 mb-3 border-b border-neutral-200/50 dark:border-neutral-800/50']">
     <Breadcrumbs :items="crumbs" :siblings="siblings" />
-    <!-- With page actions, phones give the title its own line and wrap the actions below it instead of squeezing the
-         title; the "⋯" menu alone stays next to the title. -->
+    <!-- Phones keep the "⋯" menu next to the title and wrap the page actions onto their own line below it instead of
+         squeezing the title; wider screens put the actions and the menu after the title, and wrap them below once the
+         title would get narrower than 24rem. -->
     <div :class="['flex items-start gap-x-3 gap-y-2 flex-wrap']">
-      <div :class="['min-w-0 flex-1', $slots.actions && 'max-md:basis-full']">
-        <h1 :class="['flex items-start gap-2 text-lg font-semibold break-all leading-7']">
+      <div :class="['min-w-0 flex-1 md:basis-96']">
+        <h1 :class="['flex items-start gap-2 text-lg font-semibold [overflow-wrap:anywhere] leading-7']">
           <span v-if="props.level" :class="[levelIcons[props.level], 'shrink-0 mt-1 muted']" role="img" :aria-label="levelLabels[props.level]" :title="levelLabels[props.level]" />
           <span v-if="props.loading" :class="['skeleton h-6 my-0.5 w-56 max-w-full']" data-testid="page-header-skeleton" />
           <slot v-else name="title">
@@ -75,11 +76,15 @@ const siblings = computed(() => {
           </slot>
         </div>
       </div>
-      <!-- As tall as the title's first line, so actions line up with the title wherever the header wraps. -->
-      <div :class="['flex items-center gap-2 flex-wrap min-h-7']">
+      <!-- As tall as the title's first line on wide screens, so actions line up with the title. On phones the line
+           collapses when every action hides itself there (the experiment trend). -->
+      <div v-if="$slots.actions" :class="['flex items-center gap-2 flex-wrap md:min-h-7', 'max-md:(order-2 basis-full)']">
         <slot name="actions" />
-        <IdMenu v-if="props.id && props.level" :id="props.id" :kind="levelLabels[props.level].toLowerCase()" />
       </div>
+      <!-- IdMenu renders no element of its own; the wrapper carries the order and the alignment. -->
+      <span v-if="props.id && props.level" :class="['flex items-center min-h-7 max-md:order-1']">
+        <IdMenu :id="props.id" :kind="levelLabels[props.level].toLowerCase()" />
+      </span>
     </div>
   </header>
 </template>
diff --git a/packages/ui/client/src/components/ProgressPanel.vue b/packages/ui/client/src/components/ProgressPanel.vue
index c80f079..c2d1f89 100644
--- a/packages/ui/client/src/components/ProgressPanel.vue
+++ b/packages/ui/client/src/components/ProgressPanel.vue
@@ -5,6 +5,7 @@ import type { LiveConnection } from '../composables/useRunLive'
 import { useIntervalFn, useTimestamp } from '@vueuse/core'
 import { computed } from 'vue'
 
+import InfoButton from './InfoButton.vue'
 import ProgressBar from './ProgressBar.vue'
 import ProgressChart from './ProgressChart.vue'
 import StateBadge from './StateBadge.vue'
@@ -40,6 +41,8 @@ const basisText = computed(() => ({
   'ended': 'run ended',
   'unknown': 'no case finished yet: no estimate',
 })[progress.value.basis])
+/** How the remaining time is estimated: printed under the numbers on desktop, behind an info button on phones. */
+const etaBasis = computed(() => `ETA basis: ${basisText.value}${live.value && progress.value.lowerBound ? '; auto attempts were seen, so more rounds may follow (lower bound)' : ''}. Rule: elapsed ÷ settled cases × estimated cases − elapsed, and at least as long as the longest running case has run.`)
 const connectionText = computed(() => ({
   closed: 'not connected',
   connecting: 'connecting…',
@@ -122,8 +125,9 @@ const connectionText = computed(() => ({
         </dd>
       </div>
       <div>
-        <dt class="text-xs muted">
+        <dt :class="['flex items-center gap-1 text-xs muted']">
           {{ live ? 'Estimated remaining' : 'Total duration' }}
+          <span :class="['flex md:hidden']"><InfoButton label="How the ETA is estimated"><p>{{ etaBasis }}</p></InfoButton></span>
         </dt>
         <dd :class="['text-xl font-semibold tabular-nums']" data-testid="progress-eta">
           <template v-if="live">
@@ -143,8 +147,8 @@ const connectionText = computed(() => ({
         </dd>
       </div>
     </dl>
-    <p :class="['text-xs muted max-md:order-1']">
-      {{ `ETA basis: ${basisText}${live && progress.lowerBound ? '; auto attempts were seen, so more rounds may follow (lower bound)' : ''}. Rule: elapsed ÷ settled cases × estimated cases − elapsed, and at least as long as the longest running case has run.` }}
+    <p :class="['text-xs muted max-md:hidden']">
+      {{ etaBasis }}
     </p>
 
     <div v-if="props.snapshot.current.running.length > 0 || props.snapshot.current.waiting.length > 0" :class="['max-md:order-1']" data-testid="current-position">
diff --git a/packages/ui/client/src/components/RunDetails.test.ts b/packages/ui/client/src/components/RunDetails.test.ts
index 2099173..f53f484 100644
--- a/packages/ui/client/src/components/RunDetails.test.ts
+++ b/packages/ui/client/src/components/RunDetails.test.ts
@@ -8,12 +8,12 @@ describe('runDetails', () => {
    * @example
    * expect(screen.getByText('Report root')).toBeVisible()
    */
-  it('keeps the raw run identifiers collapsed until "Details" is opened', async () => {
+  it('keeps the raw run identifiers behind the "Run details" info button', async () => {
     const screen = await render(RunDetails, { props: { reportPath: 'default-workspace/osworld/exp/attempt-1/run-1', reportRoot: '/data/.vieval/reports', runId: 'run-1' } })
 
     expect(screen.getByTestId('run-details').query()).toBeNull()
 
-    await screen.getByRole('button', { name: 'Details' }).click()
+    await screen.getByRole('button', { name: 'Run details' }).click()
 
     await expect.element(screen.getByText('Report root')).toBeVisible()
     await expect.element(screen.getByText('/data/.vieval/reports')).toBeVisible()
@@ -28,7 +28,7 @@ describe('runDetails', () => {
   it('leaves out identifiers a run without a report does not have', async () => {
     const screen = await render(RunDetails, { props: { reportPath: null, reportRoot: null, runId: 'run-2' } })
 
-    await screen.getByRole('button', { name: 'Details' }).click()
+    await screen.getByRole('button', { name: 'Run details' }).click()
 
     await expect.element(screen.getByText('run-2')).toBeVisible()
     expect(screen.getByText('Report path').query()).toBeNull()
diff --git a/packages/ui/client/src/components/RunDetails.vue b/packages/ui/client/src/components/RunDetails.vue
index 9e46195..dfbabbe 100644
--- a/packages/ui/client/src/components/RunDetails.vue
+++ b/packages/ui/client/src/components/RunDetails.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { useClipboard } from '@vueuse/core'
-import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'reka-ui'
 import { computed, shallowRef } from 'vue'
 
+import InfoButton from './InfoButton.vue'
+
 /**
- * Collapsed "Details" of a run page header: the raw identifiers (run id, report path, report root) that the header
- * no longer prints, each with an explicit "Copy" action.
+ * "Run details" of a run page header, behind an info button next to the title: the raw identifiers (run id, report
+ * path, report root) that the header no longer prints, each with an explicit "Copy" action.
  */
 const props = defineProps<{
   reportPath?: null | string
@@ -29,26 +30,21 @@ function copyRow(row: { label: string, value: string }): void {
 </script>
 
 <template>
-  <CollapsibleRoot v-slot="{ open }" :class="['mt-1']">
-    <CollapsibleTrigger :class="['btn', 'px-1.5! py-0.5! text-xs muted']">
-      <span :class="[open ? 'i-mingcute-down-small-line' : 'i-mingcute-right-small-line']" aria-hidden="true" />Details
-    </CollapsibleTrigger>
-    <CollapsibleContent>
-      <dl :class="['mt-1 grid gap-x-3 gap-y-1 text-xs', 'grid-cols-[max-content_1fr_max-content] items-baseline']" data-testid="run-details">
-        <template v-for="row in rows" :key="row.label">
-          <dt :class="['muted']">
-            {{ row.label }}
-          </dt>
-          <dd :class="['mono break-all text-neutral-700 dark:text-neutral-300']">
-            {{ row.value }}
-          </dd>
-          <dd>
-            <button type="button" :class="['btn', 'px-1.5! py-0.5! text-xs']" @click="copyRow(row)">
-              {{ copied && copiedLabel === row.label ? 'Copied' : 'Copy' }}
-            </button>
-          </dd>
-        </template>
-      </dl>
-    </CollapsibleContent>
-  </CollapsibleRoot>
+  <InfoButton label="Run details">
+    <dl :class="['grid gap-x-3 gap-y-1.5 text-xs', 'grid-cols-[max-content_1fr_max-content] items-baseline']" data-testid="run-details">
+      <template v-for="row in rows" :key="row.label">
+        <dt :class="['muted']">
+          {{ row.label }}
+        </dt>
+        <dd :class="['mono break-all text-neutral-700 dark:text-neutral-300']">
+          {{ row.value }}
+        </dd>
+        <dd>
+          <button type="button" :class="['btn', 'px-1.5! py-0.5! text-xs']" @click="copyRow(row)">
+            {{ copied && copiedLabel === row.label ? 'Copied' : 'Copy' }}
+          </button>
+        </dd>
+      </template>
+    </dl>
+  </InfoButton>
 </template>
diff --git a/packages/ui/client/src/components/ScoresPanel.vue b/packages/ui/client/src/components/ScoresPanel.vue
index c4edf53..14b1b0d 100644
--- a/packages/ui/client/src/components/ScoresPanel.vue
+++ b/packages/ui/client/src/components/ScoresPanel.vue
@@ -48,6 +48,17 @@ watch(() => props.refreshKey, () => {
 })
 
 const matrixKeys = computed(() => [...new Set(props.snapshot.tasks.flatMap(task => Object.keys({ ...task.matrix?.run, ...task.matrix?.eval })))])
+/**
+ * Normalizes a task's display name for the matrix rows table, whose axis columns already show the matrix values that
+ * `vieval run` appends in brackets (`formatTaskDisplayName` in `packages/vieval/src/cli/run.ts`).
+ *
+ * Before:
+ * - "en [tts=official, asr=gemini-3.8-flash]"
+ *
+ * After:
+ * - "en"
+ */
+const taskName = (displayName: string) => displayName.replace(/ \[[^\]]*\]$/, '')
 const scoreDefinitions = computed(() => scores.data.value?.definitions ?? props.snapshot.scoreDefinitions)
 /** Every score of the run in the order the summary lists them; the series of the bar charts and the table columns. */
 const scoreNames = computed(() => (scores.data.value?.overall.scores ?? []).map(summary => summary.name))
@@ -176,7 +187,7 @@ const numeric = computed(() => (metrics.data.value?.numeric ?? []).map(metric =>
             </thead>
             <tbody>
               <tr v-for="row in scoreRows" :key="row.summary.name" :class="['border-b border-neutral-100/70 dark:border-neutral-900']" data-testid="score-row">
-                <td :class="['td text-sm whitespace-nowrap']">
+                <td :class="['td text-sm max-md:text-xs whitespace-nowrap']">
                   <MetricInfo :name="row.summary.name" :definition="row.column" :values="[]" :summary="row.summary">
                     <span :class="['cursor-help', row.column?.label == null && row.column != null && 'mono']">{{ row.label }}</span>
                   </MetricInfo>
@@ -191,10 +202,10 @@ const numeric = computed(() => (metrics.data.value?.numeric ?? []).map(metric =>
                 <td :class="['td text-xs muted']">
                   {{ unscoredText(row.summary.unscored) || '—' }}
                 </td>
-                <td :class="['td text-xs']">
+                <td :class="['td text-xs min-w-64']">
                   {{ row.column?.formula ?? '—' }}
                 </td>
-                <td :class="['td text-xs mono']">
+                <td :class="['td text-xs mono whitespace-nowrap']">
                   {{ row.grader ?? '—' }}
                 </td>
               </tr>
@@ -244,10 +255,10 @@ const numeric = computed(() => (metrics.data.value?.numeric ?? []).map(metric =>
             </thead>
             <tbody>
               <tr v-for="task in props.snapshot.tasks" :key="task.id" :class="['border-b border-neutral-100/70 dark:border-neutral-900']">
-                <td class="td">
-                  <a :class="['link']" :href="href({ name: 'task', runKey, taskId: task.id })">{{ task.displayName }}</a>
+                <td :class="['td whitespace-nowrap']">
+                  <a :class="['link']" :href="href({ name: 'task', runKey, taskId: task.id })" :title="task.displayName">{{ matrixKeys.length > 0 ? taskName(task.displayName) : task.displayName }}</a>
                 </td>
-                <td v-for="key in matrixKeys" :key="key" :class="['td mono text-xs']">
+                <td v-for="key in matrixKeys" :key="key" :class="['td mono text-xs whitespace-nowrap']">
                   {{ task.matrix?.run[key] ?? task.matrix?.eval[key] ?? '—' }}
                 </td>
                 <td :class="['td min-w-48']">
@@ -355,9 +366,10 @@ const numeric = computed(() => (metrics.data.value?.numeric ?? []).map(metric =>
           </li>
         </ul>
       </section>
-      <section v-if="metrics.data.value && metrics.data.value.inference.requests > 0" :class="['card p-3 text-sm']">
-        Inference: {{ metrics.data.value.inference.requests }} requests · {{ metrics.data.value.inference.responses }} responses · {{ metrics.data.value.inference.failed }} failed
-        <span v-for="(value, key) in metrics.data.value.inference.totals" :key="key" class="ml-3 tabular-nums">{{ key }}={{ value }}</span>
+      <!-- The totals are one unbreakable `key=value` token each; the flex row wraps between them on narrow screens. -->
+      <section v-if="metrics.data.value && metrics.data.value.inference.requests > 0" :class="['card p-3 text-sm', 'flex flex-wrap items-baseline gap-x-3 gap-y-1']">
+        <span>Inference: {{ metrics.data.value.inference.requests }} requests · {{ metrics.data.value.inference.responses }} responses · {{ metrics.data.value.inference.failed }} failed</span>
+        <span v-for="(value, key) in metrics.data.value.inference.totals" :key="key" :class="['tabular-nums break-all']">{{ key }}={{ value }}</span>
       </section>
     </StateView>
   </div>
diff --git a/packages/ui/client/src/pages/ExperimentPage.vue b/packages/ui/client/src/pages/ExperimentPage.vue
index 68e4c0b..8b86efe 100644
--- a/packages/ui/client/src/pages/ExperimentPage.vue
+++ b/packages/ui/client/src/pages/ExperimentPage.vue
@@ -78,14 +78,16 @@ const expectedCounts = (run: (typeof runs.value)[number]) => ({ ...run.counts, t
 const isPartial = (run: (typeof runs.value)[number]) => run.state !== 'running' && run.caseTotal != null && run.counts.total < run.caseTotal
 
 /**
- * Grid of a run row. Wide screens: one line with select, attempt, run, duration, cases, headline score, menu (the
- * header uses the same columns). Narrow screens: select, attempt, score, and menu on the first line, the run and its
- * duration below the attempt, then the cases. The score column fits a typical headline (`100.0% Correct and natural`);
+ * Grid of a run row. Wide lists: one line with select, attempt, run, duration, cases, headline score, menu (the
+ * header uses the same columns). Narrow lists: select, attempt, and menu on the first line, the run and its
+ * duration below the attempt, then the cases, and the score below them, so the attempt keeps the width of the row.
+ * "Wide" is the width of the list card (a container query), not of the window: with the sidebar open, a window past
+ * the `md` breakpoint can still leave the card narrower than the wide columns need (62rem). The score column fits a typical headline (`100.0% Correct and natural`);
  * a longer label truncates inside it instead of spilling over the case bar.
  */
 const rowGrid = [
   'grid items-center gap-x-3 gap-y-1.5 grid-cols-[1rem_minmax(0,1fr)_auto_1.75rem]',
-  'md:(gap-x-4 grid-cols-[1rem_minmax(14rem,1.6fr)_minmax(9rem,1fr)_5rem_minmax(12rem,2fr)_minmax(8rem,12rem)_1.75rem])',
+  '@[62rem]:(gap-x-4 grid-cols-[1rem_minmax(14rem,1.6fr)_minmax(11rem,1fr)_5rem_minmax(12rem,2fr)_minmax(8rem,12rem)_1.75rem])',
 ]
 const selected = shallowRef<string[]>([])
 function duration(run: { endedAt?: string, startedAt?: string }): number | undefined {
@@ -127,11 +129,14 @@ watch([() => props.attempt, () => attempts.value.length], async ([attempt]) => {
             <span :class="levelIcons.comparison" aria-hidden="true" />Compare {{ selected.length }} runs
           </button>
         </div>
-        <section :class="['card']">
-          <div :class="[...rowGrid, 'max-md:hidden px-3 py-1.5 border-b border-neutral-200/50 dark:border-neutral-800/50', 'text-xs font-medium muted']" aria-hidden="true">
-            <span /><span>Attempt</span><span>Run</span><span>Duration</span><span>Cases</span><span class="text-right">
-              Score
-            </span><span />
+        <section :class="['card @container']">
+          <!-- The wrapper hides the header on narrow lists; the row grid itself sets `display: grid`. -->
+          <div :class="['hidden @[62rem]:block']" aria-hidden="true">
+            <div :class="[...rowGrid, 'px-3 py-1.5 border-b border-neutral-200/50 dark:border-neutral-800/50', 'text-xs font-medium muted']">
+              <span /><span>Attempt</span><span>Run</span><span>Duration</span><span>Cases</span><span class="text-right">
+                Score
+              </span><span />
+            </div>
           </div>
           <ol>
             <li
@@ -144,11 +149,11 @@ watch([() => props.attempt, () => attempts.value.length], async ([attempt]) => {
               <div
                 v-for="(run, index) in entry.runs"
                 :key="run.runKey"
-                :class="[...rowGrid, 'relative px-3 text-sm transition-colors hover:bg-primary-500/5', index === 0 ? 'py-2.5 md:py-2' : 'pb-2.5 md:pb-2 pt-0']"
+                :class="[...rowGrid, 'relative px-3 text-sm transition-colors hover:bg-primary-500/5', index === 0 ? 'py-2.5 @[62rem]:py-2' : 'pb-2.5 @[62rem]:pb-2 pt-0']"
               >
                 <input type="checkbox" :checked="selected.includes(run.runKey)" :aria-label="`Select ${run.runKey} for comparison`" :class="['relative z-1 accent-[var(--series-1)]']" @change="toggle(run.runKey)">
                 <!-- The attempt (its time) once per attempt; further runs of the same attempt are sub-rows. -->
-                <span v-if="index === 0" :class="['flex flex-col gap-1 min-w-0']">
+                <span v-if="index === 0" :class="['flex flex-col gap-1 min-w-0 col-start-2 col-span-2 @[62rem]:(col-start-auto col-span-1)']">
                   <span :class="['flex items-center gap-2 min-w-0']">
                     <span :class="[levelIcons.attempt, 'muted shrink-0']" aria-hidden="true" />
                     <IdLabel :id="entry.id" :label="entry.label" :href="href({ name: 'run', runKey: run.runKey })" stretch />
@@ -161,20 +166,20 @@ watch([() => props.attempt, () => attempts.value.length], async ([attempt]) => {
                     </span>
                   </span>
                 </span>
-                <span v-else :class="['text-xs muted pl-6']">another run of this attempt</span>
-                <span :class="['flex items-center gap-2 min-w-0 max-md:(row-start-2 col-start-2)']">
+                <span v-else :class="['text-xs muted pl-6 col-start-2 col-span-2 @[62rem]:(col-start-auto col-span-1)']">another run of this attempt</span>
+                <span :class="['flex items-center gap-2 min-w-0 row-start-2 col-start-2 @[62rem]:(row-start-auto col-start-auto)']">
                   <StateBadge :state="run.state" />
                   <a v-if="index > 0" :href="href({ name: 'run', runKey: run.runKey })" :class="['link mono text-xs stretched-link']" :title="run.runKey">{{ shortRunHash(run.runKey) }}</a>
                   <span v-else :class="['mono text-xs muted']" :title="run.runKey">{{ shortRunHash(run.runKey) }}</span>
                 </span>
-                <span :class="['text-xs muted tabular-nums whitespace-nowrap max-md:(row-start-2 col-start-3 col-span-2 text-right)']">{{ formatDuration(duration(run)) }}</span>
-                <span :class="['flex items-center gap-2 min-w-0', 'max-md:(row-start-3 col-start-2 col-span-3)']">
+                <span :class="['text-xs muted tabular-nums whitespace-nowrap row-start-2 col-start-3 col-span-2 text-right @[62rem]:(row-start-auto col-start-auto col-span-1 text-left)']">{{ formatDuration(duration(run)) }}</span>
+                <span :class="['flex items-center gap-2 min-w-0', 'row-start-3 col-start-2 col-span-3 @[62rem]:(row-start-auto col-start-auto col-span-1)']">
                   <CountsBar :class="['flex-1']" :counts="expectedCounts(run)" />
                   <span v-if="isPartial(run)" :class="['badge state-interrupted shrink-0']" :title="`${run.counts.total} of ${run.caseTotal} expected cases ran`" data-testid="attempt-partial">{{ run.counts.total }} / {{ run.caseTotal }}</span>
                 </span>
-                <HeadlineScore :class="['relative z-1 justify-self-end min-w-0 max-w-full max-md:(row-start-1 col-start-3)']" :result="run.headline" :definitions="run.headlineDefinitions" size="sm" align="end" />
+                <HeadlineScore :class="['relative z-1 justify-self-end min-w-0 max-w-full row-start-4 col-start-2 col-span-3 @[62rem]:(row-start-auto col-start-auto col-span-1)']" :result="run.headline" :definitions="run.headlineDefinitions" size="sm" align="end" />
                 <!-- IdMenu renders no element of its own; the wrapper carries the grid placement. -->
-                <span :class="['flex max-md:(row-start-1 col-start-4)']"><IdMenu :id="run.runKey" kind="run" /></span>
+                <span :class="['flex row-start-1 col-start-4 @[62rem]:(row-start-auto col-start-auto)']"><IdMenu :id="run.runKey" kind="run" /></span>
               </div>
             </li>
           </ol>
diff --git a/packages/ui/client/src/pages/ProjectPage.vue b/packages/ui/client/src/pages/ProjectPage.vue
index c2122af..c552e94 100644
--- a/packages/ui/client/src/pages/ProjectPage.vue
+++ b/packages/ui/client/src/pages/ProjectPage.vue
@@ -57,13 +57,14 @@ function toRow(experiment: ExperimentEntry) {
 }
 const rows = computed(() => (project.value?.experiments ?? []).map(toRow))
 /**
- * Grid of a row. Wide screens: one line with name, latest run, trend, cases, headline score, attempts (the header
- * uses the same columns). Narrow screens: the name on top, the latest run with the score below it, then the cases;
- * the trend and the attempt count are left out (both are on the experiment page).
+ * Grid of a row. Wide lists: one line with name, latest run, trend, cases, headline score, attempts (the header
+ * uses the same columns). Narrow lists: the name on top, the latest run below it, then the cases with the score
+ * below them; the trend and the attempt count are left out (both are on the experiment page). "Wide" is the width of
+ * the list card (a container query, 65rem), not of the window, so an open sidebar cannot push the columns out of it.
  */
 const rowGrid = [
-  'grid items-center gap-x-4 gap-y-1.5 grid-cols-[minmax(0,1fr)_auto]',
-  'md:grid-cols-[minmax(14rem,2fr)_minmax(12rem,1.2fr)_4.5rem_minmax(16rem,1.8fr)_8rem_4rem]',
+  'grid items-center gap-x-4 gap-y-1.5 grid-cols-[minmax(0,1fr)]',
+  '@[65rem]:grid-cols-[minmax(14rem,2fr)_minmax(12rem,1.2fr)_4.5rem_minmax(16rem,1.8fr)_8rem_4rem]',
 ]
 </script>
 
@@ -76,22 +77,25 @@ const rowGrid = [
 
   <StateView :error="catalog.query.error.value" :loading="catalog.query.isPending.value" :empty="project == null" empty-text="No runs in this project" empty-hint="Runs appear here once `vieval run` writes a report below the viewer's report roots." skeleton="rows" @retry="catalog.query.refetch()">
     <ViewTabs v-model="tab" :items="tabs" label="Project views" :href="value => href(tabRoute(value))">
-      <section v-if="tab === 'experiments'" :class="['card']">
-        <div :class="[...rowGrid, 'max-md:hidden px-3 py-1.5 border-b border-neutral-200/50 dark:border-neutral-800/50', 'text-xs font-medium muted']" aria-hidden="true">
-          <span>Experiment</span><span>Latest run</span><span>Trend</span><span>Cases (latest)</span><span class="text-right">
-            Score
-          </span><span class="text-right">
-            Attempts
-          </span>
+      <section v-if="tab === 'experiments'" :class="['card @container']">
+        <!-- The wrapper hides the header on narrow lists; the row grid itself sets `display: grid`. -->
+        <div :class="['hidden @[65rem]:block']" aria-hidden="true">
+          <div :class="[...rowGrid, 'px-3 py-1.5 border-b border-neutral-200/50 dark:border-neutral-800/50', 'text-xs font-medium muted']">
+            <span>Experiment</span><span>Latest run</span><span>Trend</span><span>Cases (latest)</span><span class="text-right">
+              Score
+            </span><span class="text-right">
+              Attempts
+            </span>
+          </div>
         </div>
         <ul>
           <li
             v-for="row in rows"
             :key="row.id"
-            :class="[...rowGrid, 'relative px-3 py-2.5 md:py-2 text-sm transition-colors', 'border-b last:border-b-0 border-neutral-100/70 dark:border-neutral-900 hover:bg-primary-500/5']"
+            :class="[...rowGrid, 'relative px-3 py-2.5 @[65rem]:py-2 text-sm transition-colors', 'border-b last:border-b-0 border-neutral-100/70 dark:border-neutral-900 hover:bg-primary-500/5']"
             data-testid="experiment-row"
           >
-            <span :class="['flex items-center gap-2 min-w-0 max-md:col-span-2']">
+            <span :class="['flex items-center gap-2 min-w-0']">
               <span :class="[levelIcons.experiment, 'muted shrink-0']" aria-hidden="true" />
               <ExperimentName :experiment-id="row.id" :matrix="row.matrix" :href="href({ experiment: row.id, name: 'scope', project: row.project, workspace: row.workspace })" stretch />
             </span>
@@ -100,10 +104,10 @@ const rowGrid = [
               <TimeAgo :time="row.latest.startedAt" :class="['text-xs muted truncate']" />
             </span>
             <!-- The cell stays even when the trend draws nothing (fewer than two scored runs), so later columns keep their place. -->
-            <span :class="['flex max-md:hidden']"><Sparkline :values="row.trend" :label="`${row.trendLabel} of ${row.runs.length} runs`" :width="72" /></span>
-            <CountsBar :class="['max-md:(row-start-3 col-span-2)']" :counts="row.latest.counts" />
-            <HeadlineScore :class="['relative z-1 justify-self-end max-md:(row-start-2 col-start-2)']" :result="row.latest.headline" :definitions="row.latest.headlineDefinitions" size="sm" align="end" />
-            <span :class="['text-right tabular-nums muted max-md:hidden']">{{ row.attempts.length }}</span>
+            <span :class="['hidden @[65rem]:flex']"><Sparkline :values="row.trend" :label="`${row.trendLabel} of ${row.runs.length} runs`" :width="72" /></span>
+            <CountsBar :counts="row.latest.counts" />
+            <HeadlineScore :class="['relative z-1 justify-self-end min-w-0 max-w-full']" :result="row.latest.headline" :definitions="row.latest.headlineDefinitions" size="sm" align="end" />
+            <span :class="['hidden @[65rem]:block text-right tabular-nums muted']">{{ row.attempts.length }}</span>
           </li>
         </ul>
       </section>
diff --git a/packages/ui/client/src/pages/RunPage.vue b/packages/ui/client/src/pages/RunPage.vue
index d17e077..479563c 100644
--- a/packages/ui/client/src/pages/RunPage.vue
+++ b/packages/ui/client/src/pages/RunPage.vue
@@ -104,9 +104,11 @@ const errorCaseHref = (target: { caseId: string, taskId: string }) => href({ ...
   <PageHeader :id="props.route.runKey" :loading="!live.snapshot.value && !live.error.value" level="run" :position="position" :title="documentTitle">
     <template #title>
       <IdLabel :id="props.route.runKey" :label="label" />
+      <!-- RunDetails renders no element of its own; the wrapper centers the button on the title's first line. -->
+      <span :class="['flex shrink-0 mt-0.5']"><RunDetails :run-id="props.route.runKey" :report-path="props.run?.reportPath" :report-root="props.run?.reportRoot" /></span>
     </template>
     <template #subtitle>
-      <span v-if="position.experiment" :class="['inline-flex items-center gap-1.5 mr-1 align-middle']">
+      <span v-if="position.experiment" :class="['inline-flex flex-wrap items-center gap-x-1.5 gap-y-0.5 mr-1 align-middle']">
         <span :class="[levelIcons.experiment]" aria-hidden="true" />
         <ExperimentName :experiment-id="position.experiment" :matrix="experimentMatrix" :href="position.workspace && position.project ? href({ experiment: position.experiment, name: 'scope', project: position.project, workspace: position.workspace }) : undefined" />
         <template v-if="position.attempt">
@@ -122,15 +124,14 @@ const errorCaseHref = (target: { caseId: string, taskId: string }) => href({ ...
           · interrupted by {{ live.snapshot.value.interruptSignal }}
         </template>
       </template>
-      <RunDetails :run-id="props.route.runKey" :report-path="props.run?.reportPath" :report-root="props.run?.reportRoot" />
     </template>
     <template #actions>
       <!-- The run's score at a glance, on the title's line: the headline with its completion rate, and the case bar
            (counts in its tooltip). A score over part of the cases is not the score of the run, so the completion rate
-           always stands next to it. -->
-      <span v-if="counts && live.snapshot.value" :class="['flex items-center gap-3 mr-1', 'max-md:(w-full mr-0)']" data-testid="run-score">
+           always stands next to it. Phones give the bar the full width and put the score below it. -->
+      <span v-if="counts && live.snapshot.value" :class="['flex items-center gap-3 mr-1', 'max-md:(w-full mr-0 flex-col items-stretch gap-2)']" data-testid="run-score">
         <HeadlineScore :result="live.snapshot.value.headline" :definitions="live.snapshot.value.scoreDefinitions" :task-label="taskLabel" @errors="showErrors" />
-        <CountsBar :class="['w-32 max-md:flex-1']" :counts="counts" />
+        <CountsBar :class="['w-32 max-md:(order-first w-full)']" :counts="counts" />
       </span>
       <a v-if="position.workspace && position.project && position.experiment" :class="['btn']" :href="href({ name: 'compare', query: { experiment: position.experiment, project: position.project, view: 'attempts', workspace: position.workspace } })">
         <span class="i-mingcute-git-compare-line" aria-hidden="true" />Compare attempts