From a04b2351b6fdd37869674290b8555d6cdfb87179 Mon Sep 17 00:00:00 2001
From: Bali Birch-Lee_ONS <149602681+balibirchlee@users.noreply.github.com>
Date: Mon, 3 Jun 2024 15:07:02 +0100
Subject: [PATCH] correct width of checkboxes with drop down select (#3212)

Co-authored-by: Alessio Venturini <112873190+alessioventuriniAND@users.noreply.github.com>
Co-authored-by: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com>
---
 ...ckboxes-with-descriptions_0_document_1_tablet.png |  4 ++--
 ...revealed-select-expanded_0_document_0_desktop.png |  4 ++--
 ...-revealed-select-expanded_0_document_1_tablet.png |  4 ++--
 ...oxes-with-revealed-select_0_document_1_tablet.png |  4 ++--
 ...-revealed-select-expanded_0_document_1_tablet.png |  4 ++--
 ...dios-with-revealed-select_0_document_1_tablet.png |  4 ++--
 ...mple-errors-proto-errors_0_document_0_desktop.png |  4 ++--
 ...ample-errors-proto-errors_0_document_1_tablet.png |  4 ++--
 ...rors_example-errors-proto_0_document_1_tablet.png |  4 ++--
 src/components/checkboxes/_checkboxes.scss           | 12 +++++++++++-
 src/components/radios/_radios.scss                   |  6 ------
 11 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-descriptions_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-descriptions_0_document_1_tablet.png
index c31d4bc9d9..086f557ed2 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-descriptions_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-descriptions_0_document_1_tablet.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:95873e841e12b9f5ae588d99d60907a378aec5c9c125a611b7e4b2d91b335fac
-size 43523
+oid sha256:21bc3291d238f1e2b3cfcc29e80e78691beec4bfa25289cc9b335bce58d9b5c7
+size 43524
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_0_desktop.png
index af7fe5643c..b1b0ad22e7 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_0_desktop.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:155d03cdd6730853ad51863e7896ef086720817819f43d404591517ccb2b9074
-size 32496
+oid sha256:7a5abc54846c62146e70d291c648b62a30dd7b514379d82914f9bb05ac9ba7b1
+size 32498
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_1_tablet.png
index 97c770cacf..e89888e4f5 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_1_tablet.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7596254de1351a859255a7e6fbf738ce7669076207b7f948a27048f62a809f61
-size 26532
+oid sha256:f7ea9edbecd7f594bd1fcb8e342d409c679431da13573ef880ed114c87746f92
+size 26530
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select_0_document_1_tablet.png
index 95637e6a4b..1ec5b60bd7 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select_0_document_1_tablet.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:512e8c50a3b61e2282a50c8259f64a1067e28336c4eec10ab47b0f028dd8b31e
-size 19889
+oid sha256:dec4f431d976488cb1c8972a23d674bf44f6f076fedfd3bb4694f0e14aa7b1ee
+size 19890
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select-expanded_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select-expanded_0_document_1_tablet.png
index 8076f6d041..1138221d33 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select-expanded_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select-expanded_0_document_1_tablet.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b70b67254852a27ade4ef09b21bd2ed7c16ed8a890da293b6a79d2d04c266881
-size 26298
+oid sha256:8e99e9fbad9257fea5e0000383a3e4cb8738fd9a613ff5c7c46797dce76b09d5
+size 26288
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select_0_document_1_tablet.png
index a09dc01a79..5cbaabdf4a 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select_0_document_1_tablet.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:279c60f7a86a7aaeac02d11c4fcd6b5f51f543288646b6008c3bd5f339b488d2
-size 19895
+oid sha256:2b488a05e694d1a24f3358185fe908f0ac35472e32d9f6870a5312b8ee2345e4
+size 19891
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_0_desktop.png
index e147e00d03..1ec0f70eb2 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_0_desktop.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f651ee84b0eb6b40a51ca39feb3d63c163cdb585ce249bd39e14dc22608b0cdb
-size 217801
+oid sha256:13294dd46b32a3f7a0e9b18dd03fb919bd011ea0327d4d7069b9d8e6465df907
+size 217828
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_1_tablet.png
index 261044ecc5..1c93b1094d 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_1_tablet.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1c612dd191768b209a586821d31f2c74df55b93c70a8243b95261d6999647ca3
-size 193900
+oid sha256:09307a23eb65746a1dd5b85419e21a0e41b5488abcf8036addbac7a3c165251b
+size 193917
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto_0_document_1_tablet.png
index 0939e9c514..71e9a139bd 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto_0_document_1_tablet.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c6ce924ae62bce27310953008539942a4a1f1cd8de078a1d57962630dc35139c
-size 109103
+oid sha256:fe1adaa843486bc3706139675fe7074fdeca21b61a5fb796d1c23a756e361f25
+size 109099
diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss
index c121a3cb5a..0f016f48a2 100644
--- a/src/components/checkboxes/_checkboxes.scss
+++ b/src/components/checkboxes/_checkboxes.scss
@@ -6,6 +6,10 @@
 
   &__items {
     display: block;
+
+    @include mq(s) {
+      max-width: max-content;
+    }
   }
 
   &__item {
@@ -19,7 +23,9 @@
 
     @include mq(s) {
       min-width: 20rem;
-      width: auto;
+      :has(select):first-child {
+        min-width: 25rem;
+      }
 
       &--no-border {
         min-width: 0;
@@ -31,5 +37,9 @@
     @extend .ons-checkboxes__item;
 
     margin-bottom: 0;
+
+    @include mq(s) {
+      max-width: max-content;
+    }
   }
 }
diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss
index b2d76fe671..0fdccd885a 100644
--- a/src/components/radios/_radios.scss
+++ b/src/components/radios/_radios.scss
@@ -1,17 +1,11 @@
 .ons-radios {
   &__items {
     @extend .ons-checkboxes__items;
-
-    @include mq(s) {
-      max-width: max-content;
-    }
   }
 
   &__item {
     @extend .ons-checkboxes__item;
 
-    width: 100%;
-
     &--no-border {
       @extend .ons-checkboxes__item--no-border;