[nekomeowww]

Summary

These are layout fixes from a pass over the viewer at 390, 820, 1024 and 1440px, using real reports (airi tts-speech-formula).

Overflow at mid widths

• The attempt rows on the experiment page and the experiment rows on the project page now pick their wide layout from the width of the list card, using container queries (@[62rem] and @[65rem]). Before, they used the viewport's md breakpoint. With the sidebar open, a window past md left the card about 300px narrower than the columns need, and the rows ran out of the card (columns reached x=1337 at 1024px).
• In the case metrics card, the grid column is now minmax(0,1fr). The d3 chart scrolls inside its own wrapper and no longer widens the card and the page.
• The page header title keeps at least 24rem on wide screens. The actions wrap below the title and no longer squeeze it to about 140px.

Phones

• The run page's "Details" toggle is now an ⓘ button after the title. The ETA basis paragraph moves behind an ⓘ next to "Estimated remaining". Both use the new InfoButton component: a popover on desktop and a vaul drawer on phones, with the same body. It follows the ScoreBadge pattern.
• The run header gives the case bar the full width.
• In the attempt and experiment rows, the score moves below the case bar, so it no longer covers the axis badges.
• The "⋯" menu stays next to the title, and page actions wrap below it. An actions slot whose contents are all hidden on phones no longer leaves an empty line.
• The run subtitle (experiment name, badge, attempt) wraps as one line of text.
• The case metrics view switcher uses the sm size, so it fits the card.
• In the scores table, the left column uses smaller text. The Formula column gets a minimum width, so rows no longer grow tall from wrapping.
• In the matrix rows table, the task cell drops the [axis=value, …] suffix that the axis columns already show (the full name is in the tooltip). Cell values no longer break at hyphens.
• The inference totals line wraps between tokens.
• Headings break at spaces before they break inside a word (overflow-wrap: anywhere instead of break-all).

Charts

• A line chart of a constant series (always 0, for example) used a 0–1e-9 axis that labelled both ends 0. The axis is now 0–1.

How tested

• With agent-browser: 17 page types (scope pages, run tabs, live, interrupted and unsupported runs, task, case, the three compare views) at 390, 820, 1024 and 1440px.
  • I checked screenshots plus a script that flags content poking out of its card, unintended sideways scrollers, and overlapping text.
  • The final sweep reports nothing, except the matrix table's intended sideways scroll inside its card.
  • I also checked the ⓘ drawers in dark mode.
• pnpm -F @vieval/ui exec vitest run: 227 passed.
• pnpm -F @vieval/ui typecheck and eslint on the changed files pass.

🤖 Generated with Claude Code

[github-actions]

Approval required for deploying to Cloudflare Workers (Preview) for docs.

Name	Link
Waiting for approval	For maintainers, approve here