Skip to content

Commit

Permalink
Set a minimum width for the select component
Browse files Browse the repository at this point in the history
A minimum width prevents the select being too narrow when only very short options are included. Having it be wider makes for a bigger target area and matches what users expect.
  • Loading branch information
frankieroberto committed Jul 18, 2024
1 parent e2ad1bf commit 30e25e8
Showing 1 changed file with 5 additions and 0 deletions.
5 changes: 5 additions & 0 deletions packages/components/select/_select.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@
border: $nhsuk-border-width-form-element solid $nhsuk-form-border-color;
box-sizing: border-box;
height: 40px;
// This min-width was chosen because:
// - it makes the Select wider than it is tall (which is what users expect)
// - 20ex + 3ex matches the 'width-10' variant of the input component
// - it fits comfortably on screens as narrow as 240px wide
min-width: 20ex + 3ex;
max-width: 100%;
padding: nhsuk-spacing(1);

Expand Down

0 comments on commit 30e25e8

Please sign in to comment.