Replace flex display of labels with align-items: center

This means that the label content is still centred against the input whilst not interfering with inline/block element dynamics within the label
alphagov · Aug 23, 2023 · b83975f · b83975f
1 parent d92046a
commit b83975f
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 16 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss b/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss
@@ -33,9 +33,7 @@
   }
 
   .govuk-checkboxes__label {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
+    align-self: center;
 
     // Ensure that the width of the label is never more than the width of the
     // container minus the input width minus the padding on either side of
@@ -49,11 +47,6 @@
     touch-action: manipulation;
   }
 
-  // to account for when there are multiple children in a label
-  .govuk-checkboxes__label * {
-    width: 100%;
-  }
-
   // [ ] Check box
   .govuk-checkboxes__label::before {
     content: "";

diff --git a/packages/govuk-frontend/src/govuk/components/radios/_index.scss b/packages/govuk-frontend/src/govuk/components/radios/_index.scss
@@ -34,9 +34,7 @@
   }
 
   .govuk-radios__label {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
+    align-self: center;
 
     // Ensure that the width of the label is never more than the width of the
     // container minus the input width minus the padding on either side of
@@ -50,11 +48,6 @@
     touch-action: manipulation;
   }
 
-  // to account for when there are multiple children in a label
-  .govuk-radios__label * {
-    width: 100%;
-  }
-
   // ( ) Radio ring
   .govuk-radios__label::before {
     content: "";