carlos / platform Public

console: bound the switcher trigger's width — a 64-character account name would shove the nav off the header

Account names are free text up to 64 characters, and the header is one flex
row: an unbounded name in the dropdown's trigger squeezes the address and
sign-out out of view. The trigger now truncates with an ellipsis at 14rem
and the menu wraps instead, so the full name is still readable one click
away.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Paul Campbell 2 months ago 780c442f7b99ce6033f72093321e23f366d8729c parent 5d183dc

1 file changed, +7 −2

internal/console/templates/layout.html +7 −2

diff --git a/internal/console/templates/layout.html b/internal/console/templates/layout.html

index f0a27ebf2..7d2975305 100644

--- a/internal/console/templates/layout.html

+++ b/internal/console/templates/layout.html

@@ -66,7 +66,12 @@

}

header .switcher > summary::-webkit-details-marker { display: none; }

header .switcher > summary:hover { background: var(--accent-soft); }

- header .switcher .current-name { font-weight: 700; }

+ /* Names are free text up to 64 characters, which unbounded would shove the

+ nav off the header — truncate in the trigger, wrap in the menu. */

+ header .switcher .current-name {

+ font-weight: 700; min-width: 0; max-width: 14rem;

+ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

+ }

header .switcher .caret { font-size: 0.7rem; color: var(--muted); }

header .switcher[open] > summary .caret { transform: rotate(180deg); display: inline-block; }

header .switcher-menu {

@@ -80,7 +85,7 @@

header .switcher-menu a, header .switcher-menu .current {

display: flex; align-items: baseline; gap: 0.5rem;

padding: 0.35rem 0.55rem; border-radius: 0.4rem;

- color: var(--ink); text-decoration: none;

+ color: var(--ink); text-decoration: none; overflow-wrap: anywhere;

}

header .switcher-menu a:hover, header .switcher-menu a:focus { background: var(--accent-soft); }

header .switcher-menu .current { font-weight: 600; background: var(--accent-soft); }