Fix divider width for small checkboxes

CHANGELOG.md

@@ -18,6 +18,7 @@ This change was introduced in [pull request #4995: Update Breadcrumb component t
 
 We've made fixes to GOV.UK Frontend in the following pull requests:
 
+- [#5114: Fix divider width for small checkboxes](https://github.com/alphagov/govuk-frontend/pull/5114) – thanks to [@colinrotherham](https://github.com/colinrotherham)
 - [#5043: Refactor the accordion JavaScript](https://github.com/alphagov/govuk-frontend/pull/5043)
 - [#5044: Remove session storage checks from accordion JavaScript](https://github.com/alphagov/govuk-frontend/pull/5044)
 - [#5060: Reintroduce additional bottom margin to Error Summary content](https://github.com/alphagov/govuk-frontend/pull/5060)

packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss

@@ -255,6 +255,11 @@
       padding-left: ($govuk-touch-target-size - $input-offset) - ($margin-left + $conditional-border-width);
     }
 
+    .govuk-checkboxes__divider {
+      width: $govuk-small-checkboxes-size;
+      margin-bottom: govuk-spacing(1);
+    }
+
     // Hover state for small checkboxes.
     //
     // We use a hover state for small checkboxes because the touch target size

packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml

@@ -196,6 +196,7 @@ examples:
         - other
 
   - name: with divider and None
+    screenshot: true
     options:
       name: with-divider-and-none
       fieldset:
@@ -700,6 +701,26 @@ examples:
         - value: b
           text: another thing
 
+  - name: small with divider and None
+    screenshot: true
+    options:
+      name: small-with-divider-and-none
+      classes: govuk-checkboxes--small
+      fieldset:
+        legend:
+          text: Which types of waste do you transport regularly?
+      items:
+        - value: animal
+          text: Waste from animal carcasses
+        - value: mines
+          text: Waste from mines or quarries
+        - value: farm
+          text: Farm or agricultural waste
+        - divider: or
+        - value: none
+          text: None of these
+          behaviour: exclusive
+
   # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
   - name: with idPrefix
     hidden: true

packages/govuk-frontend/src/govuk/components/radios/radios.yaml

@@ -242,14 +242,15 @@ examples:
             For properties that are within a geographical area defined by a local council
 
   - name: with a divider
+    screenshot: true
     options:
       idPrefix: example-divider
       name: example
       fieldset:
         legend:
           text: How do you want to sign in?
       items:
-        - value: governement-gateway
+        - value: government-gateway
           text: Use Government Gateway
         - value: govuk-verify
           text: Use GOV.UK Verify
@@ -680,6 +681,7 @@ examples:
           text: funkiness
 
   - name: small with a divider
+    screenshot: true
     options:
       idPrefix: example-small-divider
       name: example
@@ -688,7 +690,7 @@ examples:
           text: How do you want to sign in?
       classes: govuk-radios--small
       items:
-        - value: governement-gateway
+        - value: government-gateway
           text: Use Government Gateway
         - value: govuk-verify
           text: Use GOV.UK Verify