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

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

Browse Source 
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:
Nick Siegfried
2026-08-14 18:25:33 -05:00
parent d22834f2f1
commit 0f6f91ce2c
2 changed files with 23 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
html/auth-guard.js
View File

@@ -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;
}

14
html/wp-chrome.js
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() {