n.siegfried/Project-SDE-WP-Suite
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

T1.3 - F3: give the SOP header's groups a defined relationship

Browse Source 
.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>
This commit is contained in:
Nick Siegfried
2026-08-14 18:33:15 -05:00
parent 440f3239a4
commit d9f96f20e1
2 changed files with 68 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
html/work-package-suite-styles.css
View File

@@ -31,23 +31,43 @@ body {
min-height: 100vh;
}
/* HEADER — dark UI Shell bar */
/* HEADER — dark UI Shell bar
Four groups share this bar, not two: .header-left and .header-right are in the
markup, and wp-chrome.js injects the project switcher and search between them
while auth-guard.js appends the user menu after. At 1024px that is more than
fits on one 48px line, and a fixed height meant the overflow had nowhere to go
but on top of its neighbours. min-height + wrap lets the bar grow instead.
One row still measures exactly 48px, so nothing moves at desk width. */
.header {
background: var(--appbar);
color: #fff;
padding: 0 16px;
height: 48px;
min-height: 48px;
display: flex;
flex-wrap: wrap;
row-gap: 6px;
justify-content: space-between;
align-items: center;
}
/* Sizes to its content and never narrower than the logo.
This was `flex: 1; min-width: 0`, which put it in a dead tie with the chrome
wp-chrome.js injects as its sibling (`flex: 1 1 auto; min-width: 0`): both
claimed the same run of the bar, both were allowed to shrink to nothing, and
the chrome's wider content won every time. .header-left computed to 0 while
its `flex-shrink: 0` logo kept its 106px and overflowed — so the project
switcher rendered straight across the logo (F3).
Now the chrome is the only one that grows, and `min-width: auto` restores the
content-based floor, which is the logo plus the gap: the inner title block
keeps its own `min-width: 0`, so the project name still gives way first, by
the ellipsis .header-subtitle already carries. Truncation policy itself is
B2's, not this task's. */
.header-left {
flex: 1;
flex: 0 1 auto;
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
min-width: auto;
}
/* Prime logo (white-background wordmark) sits in a white chip on the dark bar */
@@ -95,10 +115,16 @@ body {
text-overflow: ellipsis;
}
/* Holds its natural size. Left to the default `flex-shrink: 1` it was squeezed
narrower than its buttons, so "Load Sample" ran underneath "Feedback". The
chrome between the two groups is the only flexible one, which is what gives
the three a defined order of giving way: right keeps its buttons, left keeps
its logo, the middle absorbs the difference. */
.header-right {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.header-button {

46
tests/f_items.py
View File

@@ -204,15 +204,41 @@ def f3(page, base, tok):
wait_for="!!document.querySelector('.header-left')")
time.sleep(0.9)
got = page.eval("""(function(){
var hl=document.querySelector('.header-left'),
logo=document.querySelector('.header-left .logo'),
ch=document.querySelector('.wpc-proj')||document.querySelector('.wp-chrome');
if(!hl||!logo||!ch) return 'null';
var L=logo.getBoundingClientRect(), C=ch.getBoundingClientRect();
var ox=Math.min(C.right,L.right)-Math.max(C.left,L.left);
var oy=Math.min(C.bottom,L.bottom)-Math.max(C.top,L.top);
var hdr=document.querySelector('.header'),
hl=document.querySelector('.header-left'),
logo=document.querySelector('.header-left .logo');
if(!hdr||!hl||!logo) return 'null';
// Every group sharing this bar, not just the two the review named: the
// markup's own, plus what wp-chrome.js and auth-guard.js inject into it.
var boxes=[];
['.header-left','.wp-chrome','.header-right','#wp-usermenu'].forEach(function(s){
var e=hdr.querySelector(s); if(!e) return;
var r=e.getBoundingClientRect();
if(r.width>0||r.height>0) boxes.push({s:s,r:r});
});
var pairs=[];
for(var i=0;i<boxes.length;i++) for(var j=i+1;j<boxes.length;j++){
var A=boxes[i].r,B=boxes[j].r;
var ox=Math.min(A.right,B.right)-Math.max(A.left,B.left);
var oy=Math.min(A.bottom,B.bottom)-Math.max(A.top,B.top);
if(ox>1&&oy>1) pairs.push(boxes[i].s+'/'+boxes[j].s+' '+Math.round(ox)+'x'+Math.round(oy));
}
// The logo is flex-shrink:0 and keeps its width even when its parent is
// crushed, so check it against the chrome directly too.
var ch=hdr.querySelector('.wpc-proj')||hdr.querySelector('.wp-chrome');
var lox=0,loy=0;
if(ch){var L=logo.getBoundingClientRect(),C=ch.getBoundingClientRect();
lox=Math.min(C.right,L.right)-Math.max(C.left,L.left);
loy=Math.min(C.bottom,L.bottom)-Math.max(C.top,L.top);}
// Anything spilling past the bar lands on the tab row underneath it.
var H=hdr.getBoundingClientRect(), spill=0;
[].forEach.call(hdr.children,function(e){
var r=e.getBoundingClientRect();
if(r.width===0&&r.height===0) return;
if(r.bottom>H.bottom+1||r.top<H.top-1) spill++;
});
return JSON.stringify({
ox:Math.round(ox), oy:Math.round(oy),
pairs:pairs, ox:Math.round(lox), oy:Math.round(loy), spill:spill,
collapsed: hl.clientWidth===0 && hl.scrollWidth>0,
hlsw:hl.scrollWidth, hlcw:hl.clientWidth,
name:((document.querySelector('.wpc-proj-name')||{}).textContent||'').trim()});})()""")
@@ -225,6 +251,10 @@ def f3(page, base, tok):
why.append(f"chrome over the logo by {o['ox']}x{o['oy']}px")
if o["collapsed"]:
why.append(f".header-left collapsed to 0 (content {o['hlsw']}px)")
if o["pairs"]:
why.append("overlapping groups: " + "; ".join(o["pairs"]))
if o["spill"]:
why.append(f"{o['spill']} group(s) spilling out of the bar")
if why:
hits.append(f"{w}px: " + ", ".join(why))
else: