.header-left and the injected chrome were in a dead tie. Both were
`flex: 1 1 auto` with `min-width: 0`, so both claimed the same run of the bar
and both were allowed to shrink to nothing. The chrome's content is wider, so
it won every time: .header-left computed to clientWidth 0 while its
flex-shrink:0 logo kept its 106px and overflowed underneath the project
switcher. With the real project name that meant "2667008" rendered on top of
the PRIME wordmark and the name itself clipped to "on EUV Cleanroom En...".
The bar now has an order of giving way rather than a tie:
.header-left flex: 0 1 auto, min-width: auto sizes to content, floors at
the logo plus the gap
.wp-chrome flex: 1 1 auto (unchanged) the only one that grows
.header-right flex: 0 0 auto keeps its buttons
min-width:auto restores the content-based floor the explicit `min-width: 0` had
removed. The inner title block keeps its own min-width:0, so the project name
still gives way first, through the ellipsis .header-subtitle already carries -
truncation policy stays B2's, and nothing here silently truncates.
Two things the review did not name were colliding on the same bar and are fixed
with it. .header-right was being squeezed below its buttons, so "Load Sample"
ran underneath "Feedback". And the header was a fixed 48px holding FOUR groups,
not two - the markup's two plus what wp-chrome.js and auth-guard.js inject - so
at 1024px the overflow had nowhere to go but on top of its neighbours, and
T1.2's user-menu wrap turned that into three rows spilling onto the tab row
below. min-height plus flex-wrap lets the bar grow instead.
Header height at 1440px with a normal project name is still exactly 48px, so
desk layout is unchanged; sop-1440 differs from the wave 0 baseline only
because T1.1 gave the switcher a name to show in place of "(unnamed)". With the
long name it grows to 62px at 1440 and 82px at 1024 - wrapping rather than
overlapping, which is the point.
The F3 probe was too narrow to have caught the right-hand collisions: it
compared the logo against the chrome and nothing else. It now checks every pair
of groups sharing the bar, plus anything spilling out of it, and still reports
FIXED at 390, 768, 1024 and 1440 with the long name.
Verified at all four widths with "Micron EUV Cleanroom Enable 2667008": no
overlapping pair, nothing spilling, logo fully visible.
browser_check 71/71. f_items: F1, F2, F3 FIXED.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Runs the app from a clean database, captures the before images, and records
which of F1-F6 actually still reproduce. All six do.
Rather than eyeball screenshots, each defect is measured in a browser by
tests/f_items.py, which reports REPRODUCES / FIXED / INCONCLUSIVE and never a
silent pass. That makes it both the wave 0 record and the wave 1-3 regression
check: an item is done when its probe flips to FIXED.
F1 hero says "Job A", app bar still says "Select a project", no reload
F2 "Sign out" spans x382-432 in a 390px viewport - cut in half, 3 rows
F3 chrome paints over the logo by 106x32px; .header-left collapses to 0
F4 comments drawer overlaps the header by 380x91px in the standalone creator
F5 5 of 5 ENABLED wizard inputs compute #f4f4f4 on #e0e0e0
F6 11 cards in one 5,017px scroll, 0 tabs (review said ~4,700px; it grew)
Three probes needed care to avoid reporting a false pass, and the traps are
worth knowing before anyone verifies a fix:
F1 disappears if localStorage is primed first, because then both sources of
truth agree. The probe clears it and drives the real picker.
F3 needs a long project name that is long IN THE DATABASE - any page reached
with ?project= re-pulls it and overwrites a locally-faked one. It also cannot
be measured by comparing .header-left to the chrome: under the long name
.header-left (flex:1, min-width:0) collapses to clientWidth 0, so that
comparison reports a tidy zero gap while the chrome paints across the logo.
It measures against .logo, which is flex-shrink:0. My first two attempts at
this probe both reported FIXED for those reasons; the screenshot did not.
F5 must ignore genuinely disabled inputs or a fix looks done while real
fields stay grey.
14 screenshots, not the 12 the plan asks for, because there are 7 pages
(file-map D1). Capture also measures horizontal overflow, which is how BL-001
was found.
Tooling: cdp.py gains viewport() and screenshot() - it could do neither, and
T0.2 requires 390px and 1440px images. 390px sets the mobile flag rather than
just narrowing the window, since every page declares width=device-width and
Chrome otherwise lays out at 980px and no media query under test fires. Both
new scripts reuse browser_check.py's seed() and start_server() instead of
growing a second fixture. Existing browser_check still passes 71/71.
No application code changed.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
