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

Selects show their value smaller than the text fields on a phone

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

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
44/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, go, react, typescript
Domain
accessibility, frontend

Research direction

Start with src/base.css and frontend/src/users/NewTokenScreen.tsx to locate the responsive select styling and the Expires control; the issue also names test/e2e/tests/responsive.spec.ts and the godmin bump files. Read the existing on a phone checks and compare Priority and Title at mobile and 1280px widths. Done when the mobile values both read 16px, desktop values both read 13px, and Expires uses the shared select control.

Written by the indexing model from the issue text.

Description

bug help wanted

What happens

Below 600 pixels wide, every select in the admin shows its value at 13px. The text, date and time fields around it use 16px. On a task, Priority reads smaller than Title and Due date. On a contact, Channel reads smaller than Value next to it. The Language screen, the importer and the fields screen do the same.

These controls come from @wordpress/ui. Its Input raises its text to 16px below 600px, to stop iOS Safari zooming into the field. SelectControl draws its trigger inside InputLayout, which stays at 13px, and nothing raises it. The trigger is a <button>, so iOS does not zoom on it. The problem is the mismatch.

One select does zoom. The Expires list on /users/tokens/new is a bare <select> with no style, so it keeps the browser default of about 13px. iOS Safari zooms the page when it is tapped.

WordPress draws every control at 16px on a phone. SelectControl in @wordpress/components uses 16px below 600px, and wp-admin/css/forms.css sets 16px on selects below 782px.

What should happen

Below 600px, a select shows its value at 16px, like the fields around it. At 600px and wider nothing changes. The Expires list becomes a SelectControl, like every other select in the admin.

@wordpress/ui hashes its class names, so the rule targets button[role="combobox"]. A new check in the on a phone block of test/e2e/tests/responsive.spec.ts opens a task and reads the computed font size of Priority and Title. Both are 16px. A second check at 1280px reads 13px for both.

Where

  • godmin src/base.css, a new @media (max-width: 599px) rule, so every admin built on godmin gets it, then the godmin bump in frontend/package.json and sdk/frontend/package.json
  • frontend/src/users/NewTokenScreen.tsx, the Expires <select>
  • @wordpress/ui src/form/primitives/input/style.module.css, the 16px rule to match
  • test/e2e/tests/responsive.spec.ts, the new checks
Dominant language
Go
Stars
287
Forks
64
Avg merge
13h 24m
Merged PRs (30d)
60

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.