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

Signed-in header overflows at md–lg widths (768–1023px)

Aperta
  • Qualcosa non va?
#163 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à
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
72/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
tailwindcss, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Inizia dal punto di ingresso AuthControls e analizza plans/site-check-153.md e PR #154 per la correzione correlata dello stato anonimo. Riproduci l’intestazione per gli utenti autenticati a 768–1023px, quindi verifica che la gestione scelta del nome mantenga Help Wanted su una sola riga, senza scorrimento orizzontale del documento, preservando al contempo la barra mobile e l’etichetta accessibile dell’account.

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

Descrizione

Surfaced while closing out plans/site-check-153.md (PR #154), which fixed the anonymous-state overflow in the same band.

Tailwind's container is 768px wide across the whole 768–1023 range, leaving a 736px content box. Signed-out, the header now fits (measured 752px right edge at 768). Signed-in, AuthControls renders avatar + full name + caret (hidden sm:inline on the name), which is roughly 100px wider than the "Sign in" button, so the utility cluster pushes "Help Wanted" onto two lines and the document scrolls horizontally again. This predates #154 (the name + 192px search + Volunteer already exceeded the box).

Options: hide the name below lg in the desktop cluster only (the same AuthControls also renders in the mobile bar at 640–767, where there is room for it, so it needs a prop or a second breakpoint), or shorten to first name below lg. The aria-label="Account menu for …" already carries the accessible name, so hiding the visible text costs nothing for AT.

Lingua principale
TypeScript
Stelle
1
Fork
1
Merge medio
11m
PR unite (30g)
22

Preparare l'ambiente

  • Include un Dockerfile o un file Docker Compose
  • Nessun modello di pull request
  • Nessuna guida per i contributori

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 CodeForPhilly/codeforphilly-ng

Tutte le issue di CodeForPhilly/codeforphilly-ng

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.