fix(web): keep the workspace switcher readable at sm with a long account name

Aperta Adatta ai principianti
  • Qualcosa non va?
#366 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
82/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
nextjs, playwright, react, tailwindcss, typescript
Ambito
frontend, testing

Direzione di ricerca

Inizia da src/components/app/account-link.tsx:62, dove si trovano il limite di 160 px del link all'account (max-w-40) e l'interruttore di visibilità sr-only sm:not-sr-only; passare quello a md:not-sr-only è la correzione più piccola proposta, con HeaderControls in src/app/w/[workspace]/layout.tsx come fallback se il reviewer preferisce un limite del nome più piccolo tra sm e md. Poi estendi i test di identità dell'header in e2e/account.spec.ts per eseguire expectTopRowFits a 640 px per un utente il cui nome riempie il limite. Fatto significa che lo switcher mostra parte del nome del workspace a 640 e 767 px, senza sovrapposizioni né scorrimento orizzontale, e che npm run lint, npm run typecheck, npm test oltre alla spec e2e passano. Misura entrambe le larghezze in un browser prima e dopo, poiché i numeri riportati provengono dal branch integration/demo-2026-11.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

area: web bug impact: low priority: P3 size: XS

Context

At the sm breakpoint the workspace header's top row runs out of room for the workspace switcher when the signed-in user's account name is long. Found while measuring the header for the review of #365 (#364); it is on the base branch, without the Admin link that pull request adds, so it is its own issue. #198 fixed the same overlap at phone widths, and expectTopRowFits (#198, #175) only runs at 375 and 320 px, where the account name is visually hidden.

Measured on integration/demo-2026-11 at 01dd5f3, Chromium (Playwright Desktop Chrome), dark color scheme, signed in as a synthetic user whose GitHub name is "Maximiliana Wolfeschlegelstein Bartholomew" (the account link truncates it at its 160 px cap, max-w-40 in src/components/app/account-link.tsx:62), on their personal workspace:

Width Switcher button Workspace name shown Space after the switcher
640 22 px 0 of 56 px minus 10 px (it draws under the Live dot)
767 99.5 px 56 of 56 px 38.6 px

For comparison, the synthetic e2e owner (account name "e2e-owner") at 640 gets an 89 px switcher showing 45 of 125 px of its name.

Header at 640 px with a long account name: the workspace switcher is a 22 px sliver with no name, and its chevron overlaps the Live dot

Why: at sm the role badge, the account name (up to 160 px), the Live label, and sm:gap-3 all switch on together (src/app/w/[workspace]/layout.tsx, HeaderControls), so the right group is 434.6 px wide at 640 px, inside a 592 px row (sm:px-6). The wordmark and the slash take 146 px, leaving nothing for the switcher, whose border, padding, gap, and chevron alone need 44 px (src/components/app/workspace-switcher.tsx:65).

Plan

  1. Give the switcher room between sm and md. The smallest change: keep the account name visually hidden until md (sr-only md:not-sr-only instead of sr-only sm:not-sr-only in src/components/app/account-link.tsx), so the row from 640 to 767 px matches the phone row plus the role badge and the Live label. If the review prefers another cut (a smaller name cap between sm and md, say), measure it the same way.
  2. Extend the header test: run expectTopRowFits (e2e/fixtures/header.ts once #365 merges, e2e/account.spec.ts before that) at 640 px for a synthetic user whose name fills the 160 px cap.

Acceptance criteria

  • At 640 px and 767 px, with an account name that fills its 160 px cap, the switcher shows part of the workspace name, nothing in the top row overlaps, and the page does not scroll sideways (expectTopRowFits passes).
  • The account name still shows from the breakpoint the fix chooses, and its accessible name ("Account: ") is unchanged at every width.
  • Playwright e2e coverage added in the header identity tests at 640 px.
  • Before and after screenshots at 640 px in the pull request, axe scan and a keyboard-only pass on the header.

Files and areas

  • src/components/app/account-link.tsx, possibly src/app/w/[workspace]/layout.tsx (HeaderControls).
  • e2e/account.spec.ts or e2e/fixtures/header.ts.
  • Non-goals: the Admin link's breakpoint (#364, settled in #365), the phone layout below sm (#198), and the nav row.

Verification

  • /Users/eddie/Downloads/brain/scripts/safe-e2e.sh <worktree> <port> -c <throwaway config> e2e/account.spec.ts: the header identity tests pass, including the new 640 px case.
  • npm run lint, npm run typecheck, npm test: pass.

Branch: <issue-number>-<slug>
Closes with a Closes #<issue-number> footer on the commit or pull request.

Model: anthropic/claude-opus-5-5 | Reasoning effort: high

Lingua principale
TypeScript
Stelle
1
Fork
1
Merge medio
6h 56m
PR unite (30g)
136

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di eddiejaoude/StackDash

Tutte le issue di eddiejaoude/StackDash

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.