[nekomeowww]

Summary

On the experiment page, the score in the attempts list overlapped the case bar. The score column was a fixed 8rem (128px). A typical headline such as 100.0% Correct and natural needs about 160px. The grid item kept the default min-width: auto, so it overflowed 32px to the left instead of truncating its label.

Fix:

• The score column is now minmax(8rem,12rem). On wide screens it grows to 12rem and fits the headline. On narrower rows it shrinks back to the old 8rem, so a row that is already tight does not get wider.
• HeadlineScore in the row gets min-w-0 max-w-full, so a longer label truncates inside the column and does not spill over the bar.

How tested

I ran vite dev against a running vieval viewer and checked with agent-browser:

• 1440px: the score column is 192px, the headline is 160px, and the gap between the score and the bar is 48px. Before the fix, the score overlapped the bar by 32px.
• 820px: the score column is 128px and the gap is 16px.
• pnpm exec eslint on the changed file and pnpm -F @vieval/ui typecheck 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