.list-head is a single-line flex row whose buttons are nowrap and
cannot shrink below their labels. The duplicates view adds a detection
mode select and a Select-duplicates button to the standard
search/sort/sync set, exceeding the list column (capped at 540px on
desktop), so the shrinkable controls crush to slivers and the fixed
buttons overlap and spill out of the column. Allow wrapping: views
that fit stay on one line; crowded toolbars flow to a second row.
Mobile is unaffected (it switches .list-head to its own grid).
.authorized-devices-actions forced its four buttons (Untrust, Trust
permanently, Device note, Delete) onto one non-wrapping, non-shrinking
line inside the fixed 26% actions column. At common desktop widths the
row overflows the column and table-layout: fixed clips it at the panel
edge, cutting off Device note and hiding Delete entirely. Let the
buttons wrap to a second line instead.
The .kv-row grid sized its actions column with auto, letting it claim
content width before the minmax(0, 1fr) value column. Once the
Check breach button joined Reveal and Copy, label + actions could
exceed the row width, resolving the value column to 0px; combined
with overflow-wrap: anywhere this rendered masked passwords as a
vertical column of one asterisk per line at common desktop widths.
Give the value column a floor of min(35%, 140px) so the actions
column shrinks and wraps its buttons (kv-actions already has
flex-wrap) before the value collapses.
Replace hardcoded #1d4ed8 / #2563eb / #bfdbfe values with their exact
design-token equivalents (--primary, --primary-hover, --primary-strong)
in 17 declarations across auth, dark, management, and vault styles.
Light theme is pixel-identical: every replaced hex equals the token's
light value. In dark theme this fixes spots that dark.css never
overrode and that kept light-theme blues on dark backgrounds:
standalone footer links and version badge, JWT warning inline link,
restore-progress active dot, TOTP countdown ring, and the
authorized-device checkbox accent.
Intentionally left alone: .btn-primary gradients (would lighten dark
buttons under white text), card brand colors (Amex/Maestro/RuPay blues
are brand constants, not theme colors), and light-pill pairings whose
backgrounds have no token (.log-mode-option.active, .log-category-auth,
.log-level-info, .folder-edit-btn:hover, #93c5fd borders).
Cordero CoreandGitHub