alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.13k stars 319 forks source link

Content of conditionally revealed checkboxes and radio buttons is misaligned #5069

Closed querkmachine closed 2 weeks ago

querkmachine commented 2 weeks ago

Description of the issue

The border and text of conditionally revealed content in Checkboxes and Radios is misaligned with respect to the input and label, appearing slightly too far to the left.

This is a visual regression that seems to have crept into one of the 5.x releases of Frontend. This issue was not present in older versions.

Reported by @MartinJJones via Slack.

Steps to reproduce the issue

View expanded checkboxes or expanded radios in any browser or screen size.

Screenshot of some checkboxes. The first one is checked, revealing an additional label and text input below it. The border, label and text input are all aligned a few pixels further left than the input and label above. Screenshot of some radio buttons. The first one is checked, revealing an additional label and text input below it. The border, label and text input are all aligned a few pixels further left than the input and label above.

Actual vs expected behaviour

The border and text should be aligned.

Environment (where applicable)