From 30e25e89349d7d094f1eb5cfaeef71f9187f3c09 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 18 Jul 2024 09:15:44 +0100 Subject: [PATCH] Set a minimum width for the select component 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. --- packages/components/select/_select.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/select/_select.scss b/packages/components/select/_select.scss index 533b10aad..2a068e4ba 100644 --- a/packages/components/select/_select.scss +++ b/packages/components/select/_select.scss @@ -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);