Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

On a phone, a signup's page has two links called "Settings" that go to different places

Aperta Adatta ai principianti
  • Qualcosa non va?
#589 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
76/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
next.js, playwright, react, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Inizia da src/app/app/(chrome)/layout.tsx e segui come il link dell’intestazione sceglie l’etichetta per gli schermi stretti e la relativa voce di traduzione. Poi leggi tests/e2e/help/connect-an-ai-assistant.spec.ts e il testo della pagina di aiuto; aggiorna l’etichetta per il telefono e il relativo controllo, mantenendo l’indirizzo email a sm e oltre. Il lavoro è terminato quando l’intestazione a 390px mostra Account, apre /app/settings e la scheda di registrazione rimane Settings.

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

Descrizione

enhancement pipeline:proposed pipeline:ux

Needs your OK: this renames the account link in the header on a phone, from "Settings" to "Account". Swap pipeline:proposed for pipeline:ready to have it built.

What happens

On a phone, a signup's page shows "Settings" twice, one above the other:

  • The account's, in the header. src/app/app/(chrome)/layout.tsx shows the organizer's email there from sm up. Below sm the address doesn't fit, so the link says "Settings". It opens /app/settings, where Connected apps lives.
  • The signup's, in the tab bar. TabsNav (src/components/signup/TabsNav.tsx) has Build, Responses and Settings. That Settings opens the signup's own settings, such as whether people must give an email.

They lead to different places with the same name. An organizer after the signup's settings can tap the header one and land on Connected apps. On a computer the header shows the email, so the clash only happens below sm (640px).

The header's "Settings" was a deliberate choice when the settings page came in (#225): the comment in the layout says the address won't fit on narrow screens. The signup's Settings tab was already there.

To see it: create a signup and open it at 390px wide. The header reads "Help Settings Sign out". The tabs under the title read "Build Responses Settings".

Fix, in outline

  • Call the header link "Account" on a phone. Change its narrow-screen text in (chrome)/layout.tsx from "Settings" to "Account".
  • Leave the rest of the link alone. It still shows the email from sm up, and its title stays "Settings".
  • Leave the page and the tab alone. /app/settings keeps its "Settings" heading and crumb. The signup's Settings tab keeps its name.

Watch for

  • Help page. connect-an-ai-assistant says "On a phone, it says Settings" and uses UI.settings for both the link and the page heading. Add a separate UI entry for the link, and update the text.
  • e2e tests.
    • tests/e2e/help/connect-an-ai-assistant.spec.ts, "the header link says Settings", clicks the link by that name at 390px.
    • tests/e2e/organizer.spec.ts finds it with getByTitle('Settings'), which still works if the title stays.
    • tests/e2e/oauth-consent.spec.ts finds it by href, with a comment that names "Settings". Update the comment.
  • docs/connect-ai-assistant.md says to click your email address to open Settings. That's the computer's header, so it stays true.
  • CHANGELOG: add a line under Unreleased › Changed.

Choices this makes

  • "Account", not an icon. The header's other items are words (Help, Sign out), and "Account" fits where "Settings" did.
  • Rename the header link, not the tab. "Signup settings" in the tab bar would make it scroll on a phone. The header link already changes its words by screen size.
  • The page keeps the name "Settings". Under its heading it says "Signed in as …", so it reads as the account's. Renaming it would change the crumb, the page title, the help page and the docs on a computer too, for a clash that only exists on a phone.

Done when

  • At 390px wide, the header link reads "Account" and opens /app/settings. From sm up it still shows the email.
  • An e2e check at 390px on a signup's page finds the tab named "Settings" and no link named "Settings". (The tabs have role="tab", so the header link is the only link that could match.)
  • The help page and its phone e2e say "Account".
  • pnpm lint && pnpm typecheck && pnpm knip && pnpm test pass.

Found by the UX walkthrough (scenario O4) on 2026-10-24, and checked against the code on main at 4ed27a9.

Generated by Claude Code

Lingua principale
TypeScript
Stelle
19
Fork
4
Merge medio
22h 46m
PR unite (30g)
170

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 richshaw/OpenSignup

Tutte le issue di richshaw/OpenSignup

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.