nhsuk
Back link looks broken with increased text size
Bug Report
What is the issue?
When you increase the text size the back button text and icon become misaligned.
What steps are required to reproduce the issue?
Increase the browser text size and view a page with a back link on.
What was the environment where this issue occurred?
- Device: Macbook Pro
- Operating System: Big Sur
- Browser: Chrome
- Browser version: Version 87.0.4280.67 (Official Build) (x86_64)
- NHS.UK frontend package version: 4.0.0
Is there anything else you think would be useful in recreating the issue?
Possible solution
Adding margin: auto, bottom: 0 and top: 0 looks to solve the issue. Needs more testing though.
.nhsuk-back-link__link .nhsuk-icon__chevron-left {
bottom: 0;
height: 24px;
left: -8px;
margin: auto;
position: absolute;
top: 0;
width: 24px;
}
Other considerations
It might also be worth reviewing the appearance of the back link, as it currently doesn't match the breadcrumb back link.
Breadcrumb back link example (with increased text size):
We also need to look at the placement of this within the page, it should be placed outside the <main> container. The current styles don't allow for this without causing unintended spacing. A number of applications are currently hot fixing this with;
<div class="nhsuk-back-link nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-0">
or
.nhsuk-back-link {
@include nhsuk-responsive-padding(4, 'top');
margin-bottom: 0;
}
Guidance should be updated in the service manual and styles changed which means this would most likely be a breaking change.
Similar issue with the Breadcrumb, Action link and Pagination when increasing the font size
icons when increasing font size