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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#366 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
82/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
nextjs, playwright, react, tailwindcss, typescript
Área
frontend, testing

Línea de trabajo

Empieza en src/components/app/account-link.tsx:62, donde viven el límite de 160 px del enlace de cuenta (max-w-40) y el cambio de visibilidad sr-only sm:not-sr-only; cambiar eso a md:not-sr-only es la corrección más pequeña propuesta, con HeaderControls en src/app/w/[workspace]/layout.tsx como alternativa si el revisor prefiere un límite de nombre más pequeño entre sm y md. Luego amplía las pruebas de identidad del header en e2e/account.spec.ts para ejecutar expectTopRowFits a 640 px para un usuario cuyo nombre llena el límite. Hecho significa que el conmutador muestra parte del nombre del workspace a 640 y 767 px, sin solapamiento ni desplazamiento lateral, y que npm run lint, npm run typecheck, npm test además de la especificación e2e pasan. Mide ambas anchuras en un navegador antes y después, ya que los números reportados vienen de la rama integration/demo-2026-11.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
1
Forks
1
Merge medio
6 h 56 min
PR fusionados (30 d)
136

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de eddiejaoude/StackDash

Todos los issues de eddiejaoude/StackDash

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.