Commits
Tarun Sukhani authored 1c52010221d
fix(testrunner): correct fixed-band heights for border-box layout (PF-91)
The Tailwind migration in 188be7164 ported screen.css's fixed
heights verbatim, but the new utilities run under
box-sizing:border-box (Tailwind preflight) while the old screen.css
relied on the browser default content-box. Numeric parity, semantic
mismatch:
#header { height: 60px } + .block { padding: 20px } = ~100px visible (content-box)
#results { height: 20px } + .block { padding: 20px } = ~ 60px visible (content-box)
The Tailwind translation kept the same numbers (h-[60px], h-5)
under border-box, so the boxes shrank to ~60px and ~20px, with
content overflowing the declared height. Visible effects, observed
via Chrome DevTools at /@tests:
- header h-[60px]: h1 (42px effective) + p (24px) = 66px content
in a 60px-content-area-after-padding box. The <p>"Select the
tests to run..." rendered in the gap between header and results.
- results h-5 (20px): text (~20.5px) overflowed below the
declared box; the bottom border at y=141 sliced through text
spanning y=126→147, producing a fake "strikethrough" on the
"(Select all - Run all)" line.
Fixes:
- #header: h-[60px] -> h-[100px]
- #results: h-5 -> h-[60px]
Both now match the original visible heights. Verified live in
the running test app.
Regenerated the three Tailwind CSS outputs so h-\[100px\] and
h-\[60px\] are present.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>