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:
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user