From 0f6f91ce2cbb8faacb956430357389f16c6468b8 Mon Sep 17 00:00:00 2001 From: "n.siegfried" Date: Fri, 14 Aug 2026 18:25:33 -0500 Subject: [PATCH] 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) --- html/auth-guard.js | 11 +++++++++-- html/wp-chrome.js | 14 ++++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/html/auth-guard.js b/html/auth-guard.js index 20663b8..a6fb029 100644 --- a/html/auth-guard.js +++ b/html/auth-guard.js @@ -179,13 +179,20 @@ var wrap = document.createElement('div'); wrap.id = 'wp-usermenu'; var linkColor = dark ? '#ffffff' : '#0f62fe'; - wrap.style.cssText = 'display:flex;align-items:center;gap:8px;margin-left:auto;padding-left:14px;white-space:nowrap;' + + // The menu wraps; each link inside does not. It used to be nowrap as a whole, + // which made it one unbreakable 412px run — at 390px that put "Sign out" at + // x382-432, half of it past the edge and untappable (F2). Wrapping the container + // costs nothing above 720px, where it has never needed to wrap. Interim: T2.2 + // replaces this markup with the drawer. + wrap.style.cssText = 'display:flex;align-items:center;gap:8px;margin-left:auto;padding-left:14px;' + + 'flex-wrap:wrap;min-width:0;' + 'font:400 13px/1.2 "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;' + 'color:' + (dark ? '#c6c6c6' : '#525252') + ';'; function sep() { var s = document.createElement('span'); s.textContent = '·'; s.style.color = dark ? '#6f6f6f' : '#a8a8a8'; return s; } function link(text, onClick, href) { var a = document.createElement('a'); a.textContent = text; a.href = href || '#'; - a.style.cssText = 'color:' + linkColor + ';text-decoration:none;font-weight:600;'; + // nowrap per link, so "Language & time" wraps as a unit rather than mid-phrase. + a.style.cssText = 'color:' + linkColor + ';text-decoration:none;font-weight:600;white-space:nowrap;'; if (onClick) a.addEventListener('click', function (e) { e.preventDefault(); onClick(); }); return a; } diff --git a/html/wp-chrome.js b/html/wp-chrome.js index 9783485..027de73 100644 --- a/html/wp-chrome.js +++ b/html/wp-chrome.js @@ -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() {