Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open
  • Is something wrong?
#216 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
Half a day
Newbie friendliness
72/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, playwright, typescript
Domain
frontend, testing

Research direction

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.

Written by the indexing model from the issue text.

Description

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
Dominant language
Go
Stars
287
Forks
64
Avg merge
13h 36m
Merged PRs (30d)
59

Getting set up

  • Ships a Dockerfile or Docker Compose file
  • No pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from gopherium/AlphOne

All issues in gopherium/AlphOne

Similar issues

More Go issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.