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

A task row's checkbox drops below its title on a phone

Aperta
  • Qualcosa non va?
#216 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
Mezza giornata
Idoneità per principianti
72/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
css, playwright, typescript
Ambito
frontend, testing

Direzione di ricerca

Start with the TaskRow layout in frontend/src/tasks/TaskList.tsx, where the horizontal Stack uses align="center", then the .alphone-tasks__row and .alphone-tasks__check rules and the max-width 639px block in frontend/src/index.css. Measure the title's first-line height and set a per-item top offset so the checkbox and High badge stay where they sit on a one-line row. Done when a new check in test/e2e/tests/tasks.spec.ts shows the checkbox top centred on the title's first line for a row with a contact and for a wrapped title, and the existing row geometry tests still pass.

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

Descrizione

bug help wanted

What happens

On a phone (under 640 pixels wide), a task row whose task is linked to a contact shows the contact name on its own line under the title (#214). This happens in the day list, in Overdue and in the Done group. The row is a horizontal Stack with align="center", so the checkbox is centred on the title and the contact line together. It hangs below the title's first line and looks like it belongs between the title and the name. The High badge moves down the same way.

A row whose title wraps to two lines has the same problem today, with or without a contact. The checkbox sits between the two title lines.

WordPress does it the other way. Its CheckboxControl lines its items up at the top and puts the checkbox in a box one line tall. The checkbox always sits on the first line of the label.

What should happen

On a phone, the checkbox and the High badge sit on the title's first line, centred on it, however many lines the title and the contact name take. A row with a one-line title and no contact looks exactly as it does today.

A plain top alignment is not enough. The title line is 20 pixels high, the checkbox is 16 and the Postpone button is 32. So each item needs the offset that keeps it where it is on a one-line row. The due date and the Postpone button keep the place they have today.

The row geometry tests in test/e2e/tests/tasks.spec.ts stay green. They cover the row heights, the level titles, the contact name under a wrapped title and the long name cut short. A new Playwright check on a phone proves that the top of the checkbox sits on the title's first line, centred on it. It covers a row with a contact and a row whose title wraps.

Where

  • frontend/src/tasks/TaskList.tsx, the TaskRow layout
  • frontend/src/index.css, .alphone-tasks__row, .alphone-tasks__check and the @media (max-width: 639px) block
  • test/e2e/tests/tasks.spec.ts, the new phone check
Lingua principale
Go
Stelle
287
Fork
64
Merge medio
13h 36m
PR unite (30g)
59

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 gopherium/AlphOne

Tutte le issue di gopherium/AlphOne

Issue simili

Altre issue su Go

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.