n.siegfried
b105135a98
"Micron EUV Cleanroom Enable 2667008" did not fit. The switcher capped the name
at 240px inside a 280px button, so the real project name was ellipsised to
"Micron EUV Clean..." on the one control whose job is to tell you which job you
are in - which is the failure this item exists to prevent.
The plan, now written into docs/reference/file-map.md so it is not re-litigated:
>= 1024px the full project NAME. Caps raised to 400px / 340px, which is
enough for a real name with no ellipsis.
< 1024px the project NUMBER alone, e.g. 2667008. Dropping the name beats
shortening it: short, stable, unambiguous.
The number is no longer prefixed to the name at wide widths. Real names already
end with their number, so the old format printed it twice - the test project
rendered as "2667008 - Micron EUV Cleanroom Enable 2667008".
The full name stays reachable at every width by three routes, none hover-only,
because the Field View is a touch surface:
- the drawer, which now shows the active project under its head, wrapping onto
as many lines as it needs and never truncated. This is the guaranteed route,
and it subscribes to ProjectData.onActiveChange so it does not go stale when
the launcher switches project without reloading.
- the switcher's title attribute, carrying the full number and name, which
surfaces on keyboard focus as well as hover.
- the switcher popover, which lists every project in full.
Crossing the breakpoint re-labels, so a resized window does not keep whichever
form was chosen at load.
Verified with the real long name at 390, 768, 1024 and 1440: nothing truncated
at any width (scrollWidth vs clientWidth, not by eye), and the drawer carries
the whole name at all four. T1.1 correctness holds - the switcher never reads
"Select a project" while a project is active.
f_items: F1-F5 FIXED, F3 still passing at all four widths with the wider
switcher. browser_check 71/71.
Wave 2 complete: one drawer on six pages, no flat strip, F2 resolved for real,
S4 closed.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
249 lines
8.4 KiB
CSS
249 lines
8.4 KiB
CSS
/* ============================================================================
|
|
SHARED APP CHROME — project switcher + global search
|
|
----------------------------------------------------------------------------
|
|
Injected by wp-chrome.js into whichever top bar a page has: the dark UI-shell
|
|
bar (.wp-appbar on index / admin / field) or the older light bars (.header on
|
|
the SOP suite and the WP creator). The two live side by side, so every colour
|
|
here comes from a variable that wp-chrome.js sets per host bar — the markup and
|
|
behaviour are identical on both.
|
|
============================================================================ */
|
|
.wp-chrome {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0; /* lets the search shrink instead of overflowing */
|
|
flex: 1 1 auto;
|
|
}
|
|
/* Light host bar (the two tool pages) */
|
|
.wp-chrome {
|
|
--wpc-fg: #161616;
|
|
--wpc-fg-dim: #525252;
|
|
--wpc-bg: #ffffff;
|
|
--wpc-bg-soft: #f4f4f4;
|
|
--wpc-border: #c6c6c6;
|
|
--wpc-hover: #e8e8e8;
|
|
--wpc-accent: #0f62fe;
|
|
}
|
|
/* Dark host bar (the UI-shell appbar) */
|
|
.wp-chrome[data-bar="dark"] {
|
|
--wpc-fg: #ffffff;
|
|
--wpc-fg-dim: #c6c6c6;
|
|
--wpc-bg: #262626;
|
|
--wpc-bg-soft: #393939;
|
|
--wpc-border: #6f6f6f;
|
|
--wpc-hover: #353535;
|
|
--wpc-accent: #78a9ff;
|
|
}
|
|
|
|
/* ── archived-project banner ──────────────────────────────────────────────── */
|
|
/* Inserted by wp-chrome.js as the top bar's next sibling, so it sits directly
|
|
under the bar in normal flow and can never overlap it or eat its height (the
|
|
bar is sticky; this strip scrolls away under it). `flex: 0 0 auto` is for the
|
|
suite page, whose shell is a flex column — without it the strip would squash.
|
|
Amber tokens are the suite's warning set, same as the sync badge. */
|
|
.wpc-archived {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding: 9px 16px;
|
|
background: #fdf6dd;
|
|
color: #8e6a00;
|
|
border-bottom: 1px solid #f1c21b;
|
|
border-radius: 0;
|
|
font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
font-size: 13.5px;
|
|
line-height: 1.35;
|
|
}
|
|
.wpc-archived-ico { flex: 0 0 auto; font-size: 14px; }
|
|
.wpc-archived-text { min-width: 0; } /* wraps instead of forcing a scrollbar */
|
|
@media (max-width: 620px) {
|
|
.wpc-archived { padding: 8px 12px; font-size: 13px; }
|
|
}
|
|
|
|
/* ── project switcher ─────────────────────────────────────────────────────── */
|
|
.wpc-proj { position: relative; flex: 0 0 auto; }
|
|
.wpc-proj-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
max-width: 280px;
|
|
padding: 5px 10px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 3px;
|
|
color: var(--wpc-fg);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
line-height: 1.25;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
.wpc-proj-btn:hover { background: var(--wpc-hover); border-color: var(--wpc-border); }
|
|
.wpc-proj-btn[aria-expanded="true"] { background: var(--wpc-hover); border-color: var(--wpc-border); }
|
|
.wpc-proj-labels { min-width: 0; }
|
|
.wpc-proj-kicker {
|
|
display: block;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: .06em;
|
|
text-transform: uppercase;
|
|
color: var(--wpc-fg-dim);
|
|
}
|
|
/* B2. These two caps are the "does not fit 280px" the review measured: a real name
|
|
ran past 240px and was ellipsised on the one control whose job is to say which job
|
|
you are in. Above 1024px the bar has the room, so the caps are raised until a real
|
|
project name fits — "Micron EUV Cleanroom Enable 2667008" is the one to test with.
|
|
Below 1024px the label is the project number instead (see wp-chrome.js), which is
|
|
short enough that these caps never bite. The ellipsis stays only as a backstop for
|
|
a name longer than anything real. */
|
|
.wpc-proj-name {
|
|
display: block;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 240px;
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.wpc-proj-btn { max-width: 400px; }
|
|
.wpc-proj-name { max-width: 340px; }
|
|
}
|
|
.wpc-caret { flex: 0 0 auto; align-self: flex-end; margin-bottom: 3px; font-size: 10px;
|
|
line-height: 1; color: var(--wpc-fg-dim); }
|
|
|
|
/* ── dropdown / results panel (shared shell) ──────────────────────────────── */
|
|
.wpc-pop {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
left: 0;
|
|
z-index: 2000;
|
|
min-width: 320px;
|
|
max-width: min(460px, 92vw);
|
|
max-height: min(70vh, 560px);
|
|
overflow-y: auto;
|
|
background: #fff;
|
|
color: #161616;
|
|
border: 1px solid #e0e0e0;
|
|
box-shadow: 0 8px 28px rgba(20, 30, 50, .22);
|
|
border-radius: 4px;
|
|
}
|
|
.wpc-pop[hidden] { display: none; }
|
|
.wpc-pop-head {
|
|
padding: 9px 12px 6px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: .07em;
|
|
text-transform: uppercase;
|
|
color: #6f6f6f;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
.wpc-item {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
background: transparent;
|
|
border: 0;
|
|
border-left: 3px solid transparent;
|
|
text-align: left;
|
|
font: inherit;
|
|
font-size: 13px;
|
|
color: #161616;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
.wpc-item:hover, .wpc-item.is-active { background: #f4f4f4; }
|
|
.wpc-item.is-current { border-left-color: #0f62fe; background: #edf5ff; }
|
|
.wpc-item-title { display: block; font-weight: 600; }
|
|
.wpc-item-sub { display: block; font-size: 11.5px; color: #6f6f6f; }
|
|
.wpc-item-mono { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: 12px; color: #0f62fe; }
|
|
.wpc-empty { padding: 14px 12px; font-size: 13px; color: #6f6f6f; }
|
|
.wpc-pop-foot {
|
|
padding: 8px 12px;
|
|
border-top: 1px solid #f0f0f0;
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.wpc-foot-btn {
|
|
font: inherit;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
padding: 5px 10px;
|
|
border: 1px solid #c6c6c6;
|
|
background: #fff;
|
|
color: #161616;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
.wpc-foot-btn:hover { border-color: #0f62fe; color: #0f62fe; }
|
|
|
|
/* ── global search ────────────────────────────────────────────────────────── */
|
|
/* Centered in the bar: the wrapper takes the free space and centres a capped box,
|
|
which keeps the field mid-screen without absolute positioning (so it can never
|
|
sit on top of the bar's own buttons). */
|
|
.wpc-search {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
min-width: 0;
|
|
}
|
|
.wpc-search-box {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 560px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 10px;
|
|
height: 34px;
|
|
background: var(--wpc-bg);
|
|
border: 1px solid var(--wpc-border);
|
|
border-radius: 3px;
|
|
}
|
|
.wpc-search-box:focus-within { outline: 2px solid var(--wpc-accent); outline-offset: -2px; }
|
|
.wpc-search-ico { flex: 0 0 auto; color: var(--wpc-fg-dim); font-size: 13px; }
|
|
.wpc-search-input {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
outline: none;
|
|
color: var(--wpc-fg);
|
|
font: inherit;
|
|
font-size: 13.5px;
|
|
}
|
|
.wpc-search-input::placeholder { color: var(--wpc-fg-dim); }
|
|
.wpc-kbd {
|
|
flex: 0 0 auto;
|
|
font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
|
|
font-size: 10.5px;
|
|
color: var(--wpc-fg-dim);
|
|
border: 1px solid var(--wpc-border);
|
|
border-radius: 3px;
|
|
padding: 1px 5px;
|
|
white-space: nowrap;
|
|
}
|
|
.wpc-search .wpc-pop { left: 50%; transform: translateX(-50%); min-width: min(560px, 92vw); }
|
|
.wpc-clear {
|
|
flex: 0 0 auto; background: transparent; border: 0; cursor: pointer;
|
|
color: var(--wpc-fg-dim); font: inherit; font-size: 14px; line-height: 1; padding: 2px 4px;
|
|
}
|
|
.wpc-clear:hover { color: var(--wpc-fg); }
|
|
|
|
/* ── narrow screens ───────────────────────────────────────────────────────── */
|
|
@media (max-width: 900px) {
|
|
.wpc-search-box { max-width: none; }
|
|
.wpc-kbd { display: none; }
|
|
.wpc-proj-btn { max-width: 190px; }
|
|
.wpc-proj-name { max-width: 150px; }
|
|
}
|
|
@media (max-width: 620px) {
|
|
/* Keep the switcher (you must be able to change project) and let the search
|
|
collapse to an icon-width field rather than pushing the bar out of shape. */
|
|
.wpc-proj-kicker { display: none; }
|
|
.wpc-search { flex: 1 1 120px; }
|
|
}
|