nhsuk-frontend
nhsuk-frontend copied to clipboard
.nhsuk-width-container-fluid class is no longer working as expected.
Bug Report
What is the issue?
The .nhsuk-width-container-fluid class is no longer working as expected.
I use the class for creating a full screen layout (as opposed to the standard narrower layout).
After upgrading from 7.0.0 to 8.0.2, The fluid full screen layout is applied to the body but not the header, which retains the width of .nhsuk-header__container.
I don't know if it's a bug but it seems like one.
What steps are required to reproduce the issue?
<header class="nhsuk-header" role="banner">
<div class="nhsuk-width-container-fluid nhsuk-header__container">
<div class="nhsuk-header__logo nhsuk-header__logo--only"><a class="nhsuk-header__link" href="/" aria-label="NHS homepage">
<svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
<path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
<path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
</svg>
</a>
</div>
</div>
</header>
What was the environment where this issue occurred?
- Device: Dell xps 15
- Operating System: Win
- Browser: Chrome
- Browser version: latest
- NHS.UK frontend package version: 8.0.2
- Node version: latest
- npm version: latest