[Feature Request] Border-width inconsistency for mobile for outlined components
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 41k
- Forks
- 7.1k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 11
Description
Problem to solve
Better visual consistency between components, in desktop and mobile.
Proposed solution
In some components in like v-btn and v-alert the border-width is "thin", but in the components v-text-field and v-select the width is "1px", this isn't noticeable on desktop, but it is on mobile.
In my opinion the "1px" border looks better, and the official material components also uses "1px" for borders.
Also I noticed that text-field and select components doesn't have a dedicated file for variables.
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
Compare the border-width definitions used by v-btn and v-alert with those in v-text-field and v-select, including how their variables are organized. Start by locating the component styles and checking the mobile rendering. Done means the outlined components use the agreed 1px border consistently without visual regressions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100