T1.2 - F2 (interim): the app bar no longer clips at 390px

INTERIM. T2.2 is the real fix: wave 2 replaces this markup with the existing
drawer. Nothing here is meant to survive that, so it is the smallest change
that makes every control reachable, not a redesign - no hamburger, no
responsive menu, no avatar dropdown.

The bar already wrapped at 720px, so the wrap rule was not the problem. The
problem was #wp-usermenu, built in auth-guard.js with an inline
white-space:nowrap on the container: "Root . Admin . Users . Language & time .
Password . Sign out" became one unbreakable 412px run inside a 374px bar. Being
inline and unclassed, no stylesheet media query could reach it. At 390px that
put "Sign out" at x382-432 - half of it past the edge, exactly as the review
described.

The container now wraps and each link carries nowrap instead, so "Language &
time" still breaks as a unit rather than mid-phrase. Bar scrollWidth at 390px
goes 424 -> 374, and "Sign out" moves onto its own row, fully visible.

The truncated search is the other half of F2. The control was always usable -
what was cut was the placeholder - so below 620px, the breakpoint wp-chrome.css
already uses for this element, it reads "Search..." instead of "Search work
packages, projects, SOPs...".

Verified at 390px on all 7 pages: no bar control crosses the viewport edge, and
"Sign out" is fully within it everywhere. At 1440px the screenshot diff against
the wave 0 baseline is byte-identical for login, launcher, SOP wizard and field
view. Three pages differ, all intended: admin and users because T1.1 gave their
bar a project to show, and the creator because this change removed its
horizontal overflow.

That last one is worth flagging: the same unbreakable menu run was the cause of
four of the five overflows recorded in wave 0, including BL-001, the creator
scrolling sideways at 1440px. Overflow at capture is now 1 of 14 shots rather
than 5 - only the creator at 390px remains, which is its own layout and is
T7.1's to resolve. BL-001 is updated rather than closed, so T7.1 still checks
it.

Tap targets in this menu are 16px tall. Not touched here - it is C1's, audited
in wave 9 - and logged as BL-003.

f_items F2 FIXED. browser_check 71/71.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-14 18:25:33 -05:00
parent d22834f2f1
commit 0f6f91ce2c
2 changed files with 23 additions and 2 deletions

View File

@@ -255,6 +255,20 @@
var clear = box.querySelector('.wpc-clear');
var timer = null, seq = 0, items = [], activeIx = -1;
// Below 620px the box is roughly 200px and the full placeholder ellipsises to
// "Search work packages, proj" — the truncation half of F2. The control is
// usable either way; this stops it reading as broken. 620px is the breakpoint
// wp-chrome.css already uses for this element, not a new one. Interim: T2.2.
try {
var narrow = window.matchMedia('(max-width: 620px)');
var setPlaceholder = function (m) {
input.placeholder = m.matches ? 'Search…' : 'Search work packages, projects, SOPs…';
};
setPlaceholder(narrow);
if (narrow.addEventListener) narrow.addEventListener('change', setPlaceholder);
else if (narrow.addListener) narrow.addListener(setPlaceholder);
} catch (e) {}
function close() { pop.hidden = true; activeIx = -1; }
function highlight() {