The sign-up dialog's "See alternatives" link looks out of place, and is too small to tap on a phone

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

Direzione di ricerca

Leggi src/app/s/[slug]/commit-dialog.tsx e confronta il link con il pulsante secondario in src/app/s/[slug]/c/[id]/edit-form.tsx; consulta src/app/s/[slug]/slot-format.ts per le indicazioni sulla dimensione dell’area di tocco sui telefoni. Aggiorna solo lo stile del link e verificalo nella finestra di dialogo e nel pannello inferiore a larghezze da telefono e desktop. Il lavoro è completo quando corrisponde al pulsante secondario, è alto almeno 44px sui telefoni e i controlli indicati vengono superati.

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

Descrizione

enhancement

What happens

When a slot fills while someone is signing up, the dialog shows "Sorry, this slot just filled up." / "Pick another slot." and, under them, a See alternatives link (CommitDialog in src/app/s/[slug]/commit-dialog.tsx).

The link is styled inline-block rounded bg-white px-2 py-1 underline and sits inside the red FormError box. The result is a small white chip with underlined red text: it reads as neither a button nor a plain link, and it doesn't match any other action on the participant pages.

  • It doesn't look like our buttons. Elsewhere on the participant pages, a secondary action in a red box is a bordered white button (rounded-lg border border-surface-sunk bg-white px-3 py-1.5 text-xs font-medium), like Keep in the cancel confirmation in src/app/s/[slug]/c/[id]/edit-form.tsx.
  • It's too small to tap. At text-xs with py-1 it's about 24px tall. The slot rows' actions are at least 44px on phones (min-h-11, see the comment in src/app/s/[slug]/slot-format.ts), and participants mostly arrive on phones.

Found while tophatting #806, which only changes when the link shows, not how it looks.

Fix, in outline

  • Style the link like the existing secondary button above (same classes, or a shared one if a second copy would appear), with max-sm:min-h-11 so it's a comfortable tap target on phones.
  • Keep it an <a href="/s/<slug>">, keep the words "See alternatives", and keep it inside the FormError box under the message.
  • Drop the wrapper div's space-y-1 if it no longer does anything (it has one child).

Watch for

  • Only the look changes. When the link shows (offersAlternatives, once #806 lands), where it goes and its text stay the same.
  • Related, maybe separate: clicking it just reloads the signup page. It doesn't point at the slots the server suggested, so the participant still has to find an open one themselves. Worth a look while here, but fine to split into its own issue.
  • Check it at phone width (390px) and desktop, in the bottom sheet as well as the dialog.

Done when

  • See alternatives looks like the other secondary buttons on the participant pages and is at least 44px tall on phones.
  • pnpm lint && pnpm format:check && pnpm typecheck && pnpm knip && pnpm test pass.
Lingua principale
TypeScript
Stelle
19
Fork
4
Merge medio
19h 15m
PR unite (30g)
205

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.