Ticks on checkboxes inside details element not rendering correctly

[andymantell]

Bug Report

What is the issue?

If you put a checkbox inside a details element, the tick is too large and not centred correctly.

What steps are required to reproduce the issue?

Combine the details and checkbox examples from the design system as per this codepen:

https://codepen.io/andymantell/pen/KKYdjxE

What was the environment where this issue occurred?

• Device: Windows PC
• Operating System: Windows 11
• Browser: Google Chrome
• Browser version: 122
• NHS.UK frontend package version: 8.1.0

[andymantell]

Thanks to @Fenwick17 - we've worked out that adding this CSS fixes the issue:

.nhsuk-label {
  box-sizing: border-box;
}

It's slightly baffling me why the label is inheriting a box-sizing differently inside the details element... But this fix does seem to work, and it's pretty harmless since border-box is what we'd want it to be anyway. I've stuck it in our service's "shame.scss" for the moment - will do a PR once we've been through testing.