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>
109 lines
4.7 KiB
CSS
109 lines
4.7 KiB
CSS
/* Global app navigation drawer (see wp-sidenav.js).
|
|
|
|
An off-canvas panel rather than a pinned rail, at every width: the field view is a
|
|
centred 760px column read on a phone or a tablet in a glove, and a permanent
|
|
sidebar would either squeeze that column or hide on the one device that matters.
|
|
Overlay behaves identically everywhere, which is also one less layout to test.
|
|
|
|
Colours come from the dark app bar it hangs off (#161616 / Carbon Gray 100), not
|
|
from theme-light.css, so the drawer reads as an extension of the bar. */
|
|
|
|
.wp-navbtn{
|
|
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
|
|
width: 40px; height: 40px; margin-right: 4px; padding: 0;
|
|
background: none; border: none; border-radius: 0; cursor: pointer;
|
|
color: #f4f4f4; font-family: inherit; line-height: 1;
|
|
}
|
|
.wp-navbtn:hover{ background: #353535; }
|
|
.wp-navbtn:focus-visible{ outline: 2px solid #ffffff; outline-offset: -2px; }
|
|
/* A light bar (the SOP suite / creator headers) needs the opposite ink. */
|
|
.wp-navbtn[data-bar="light"]{ color: #161616; }
|
|
.wp-navbtn[data-bar="light"]:hover{ background: #e8e8e8; }
|
|
|
|
.wp-navscrim{
|
|
position: fixed; inset: 0; z-index: 10010;
|
|
background: rgba(22,22,22,.55);
|
|
opacity: 0; transition: opacity .18s ease;
|
|
}
|
|
.wp-navscrim.is-open{ opacity: 1; }
|
|
.wp-navscrim[hidden]{ display: none; }
|
|
|
|
.wp-sidenav{
|
|
position: fixed; top: 0; left: 0; bottom: 0; z-index: 10011;
|
|
width: min(284px, 84vw);
|
|
display: flex; flex-direction: column;
|
|
background: #161616; color: #f4f4f4;
|
|
font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
transform: translateX(-100%); transition: transform .2s ease;
|
|
box-shadow: 2px 0 16px rgba(0,0,0,.4);
|
|
overflow: hidden;
|
|
}
|
|
.wp-sidenav.is-open{ transform: translateX(0); }
|
|
/* Respect a reduced-motion preference: the drawer still opens, it just doesn't slide. */
|
|
@media (prefers-reduced-motion: reduce){
|
|
.wp-sidenav, .wp-navscrim{ transition: none; }
|
|
}
|
|
|
|
.wp-sidenav-head{
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 12px 14px; border-bottom: 1px solid #393939; flex: 0 0 auto;
|
|
}
|
|
.wp-sidenav-head .wp-logo-chip{ flex: 0 0 auto; }
|
|
.wp-sidenav-title{ font-size: 13px; font-weight: 600; line-height: 1.25; }
|
|
.wp-sidenav-title span{ display: block; font-size: 11px; font-weight: 400; color: #a8a8a8; }
|
|
|
|
/* The active project, in full (B2). Below 1024px the app bar shows the project
|
|
number alone, so this is where the whole name has to be readable — it wraps on
|
|
as many lines as it needs and is never truncated. */
|
|
.wp-sidenav-proj{
|
|
padding: 12px 14px; border-bottom: 1px solid #393939; flex: 0 0 auto;
|
|
display: flex; flex-direction: column; gap: 2px;
|
|
}
|
|
.wp-sidenav-proj[hidden]{ display: none; }
|
|
.wp-sidenav-proj-k{
|
|
font-size: 10px; font-weight: 600; letter-spacing: .08em;
|
|
text-transform: uppercase; color: #a8a8a8;
|
|
}
|
|
.wp-sidenav-proj strong{
|
|
font-size: 13px; font-weight: 600; line-height: 1.3; color: #f4f4f4;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.wp-sidenav-proj-n{ font-size: 11px; color: #c6c6c6; }
|
|
.wp-sidenav-close{
|
|
margin-left: auto; width: 32px; height: 32px; padding: 0; flex: 0 0 auto;
|
|
background: none; border: none; border-radius: 0; color: #c6c6c6;
|
|
font-size: 18px; line-height: 1; cursor: pointer; font-family: inherit;
|
|
}
|
|
.wp-sidenav-close:hover{ background: #353535; color: #fff; }
|
|
|
|
.wp-sidenav-body{ flex: 1 1 auto; overflow-y: auto; padding: 6px 0 18px; }
|
|
.wp-sidenav-sect{
|
|
padding: 14px 16px 4px; font-size: 11px; font-weight: 600;
|
|
letter-spacing: .06em; text-transform: uppercase; color: #8d8d8d;
|
|
}
|
|
.wp-sidenav-link{
|
|
display: flex; align-items: center; gap: 12px; width: 100%;
|
|
/* 44px minimum: this is tapped with a work glove on. */
|
|
min-height: 44px; padding: 10px 16px;
|
|
background: none; border: none; border-left: 3px solid transparent; border-radius: 0;
|
|
color: #f4f4f4; font: inherit; font-size: 14px; text-align: left; text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
.wp-sidenav-link:hover{ background: #353535; }
|
|
.wp-sidenav-link:focus-visible{ outline: 2px solid #ffffff; outline-offset: -2px; }
|
|
.wp-sidenav-link.is-current{ background: #262626; border-left-color: #0f62fe; font-weight: 600; }
|
|
.wp-sidenav-ico{
|
|
flex: 0 0 20px; width: 20px; text-align: center; font-size: 15px; color: #c6c6c6;
|
|
}
|
|
.wp-sidenav-link.is-current .wp-sidenav-ico{ color: #78a9ff; }
|
|
.wp-sidenav-label{ flex: 1 1 auto; min-width: 0; }
|
|
.wp-sidenav-label small{ display: block; font-size: 11.5px; font-weight: 400; color: #a8a8a8; }
|
|
|
|
.wp-sidenav-foot{
|
|
flex: 0 0 auto; border-top: 1px solid #393939; padding: 8px 0;
|
|
}
|
|
.wp-sidenav-who{
|
|
padding: 6px 16px 8px; font-size: 12px; color: #a8a8a8;
|
|
}
|
|
.wp-sidenav-who strong{ display: block; color: #f4f4f4; font-size: 13px; font-weight: 600; }
|