StackExchange / StackExchange/Stacks
Explore normalizing form elements with an explicit height
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 672
- Forks
- 107
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 26
Description
When trying to solve for #699, it's become increasingly clear that basing the size of form elements on padding, font size, and line-height might cause issues with keeping things consistent.
For example, inputs in Safari differ in height from Chrome. They're approximately 33px. Buttons are approximately 38px. Normalizing each form element at, say, 36px would allow us to rely way less on flex layout, and would provide a consistent, canonical height to things across each platform, browser, and font.
This work should likely be tied to any aesthetic changes we may want to make to buttons e.g. increasing border radii.
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 with issue #699 and compare the reported Safari and Chrome heights for inputs and buttons. Define whether a canonical 36px height and related button border-radius changes are in scope, then verify the result across the mentioned platforms and browsers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100