Consistent font size on small screen widths
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.9k
- Forks
- 1.1k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 57
Description
Package
v4.5.0
Description
This PR increased the font-size of certain input components to address issues on iOS relating to a11y features of the platform.
The issue is that only the font size of the affected components was increased. This leaves the font size of other components the same as before which looks very odd. For instance the UInput has the increased font size while the USelect has the smaller font size it has on desktop. This looks very weird when both of these components appear in the same form.
I understand that these changes were made to improve UX but I think we should also consider what this does to the overall design system and perhaps increase font size globally?
Additional context
Here's an example screenshot:
And here's what it looked like before the update:
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing PR #6040 and comparing the small-screen font sizing of UInput, USelect, and the other affected input components. Trace how their responsive styles are defined and determine whether the design system should apply a consistent size globally. Done means components shown together in a small-screen form have consistent font sizing without losing the iOS accessibility improvement.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, tailwindcss, typescript
- Domain
- accessibility, design, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100