diff --git a/CHANGELOG.md b/CHANGELOG.md index 4e2900a45..7b5bbba8c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,9 @@ - Change "Contact us" in the footer link examples to "Give us feedback" ([PR 972](https://github.com/nhsuk/nhsuk-frontend/pull/972)) - Remove the pattern from the date input component -- Adjust errorSummary bottom margin ([PR 947](https://github.com/nhsuk/nhsuk-frontend/pull/973)) +- Adjust errorSummary bottom margin ([PR 973](https://github.com/nhsuk/nhsuk-frontend/pull/973)) +- Fix height of select component in Safari ([PR 987](https://github.com/nhsuk/nhsuk-frontend/pull/987)) +- Set minimum width of select component ([PR 987](https://github.com/nhsuk/nhsuk-frontend/pull/987)) :new: **New features** diff --git a/packages/components/select/_select.scss b/packages/components/select/_select.scss index 7f61cc13c..1e8411904 100644 --- a/packages/components/select/_select.scss +++ b/packages/components/select/_select.scss @@ -2,12 +2,22 @@ COMPONENTS/ #SELECT ========================================================================== */ +/** + * Select input sizing + * 1. Uses rems so that safari input scales with font size + * 2. 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 + */ + .nhsuk-select { @include nhsuk-font(19); border: $nhsuk-border-width-form-element solid $nhsuk-form-border-color; box-sizing: border-box; - min-height: 40px; + height: 2.5rem; /* [1] */ + min-width: 20ex + 3ex; /* [2] */ max-width: 100%; padding: nhsuk-spacing(1);