Merge branch 'main' of https://github.com/nhsuk/nhsuk-frontend into a…

…djust-error-summary-margin

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**
 

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);