nhsuk-frontend icon indicating copy to clipboard operation
nhsuk-frontend copied to clipboard

.nhsuk-width-container-fluid class is no longer working as expected.

Open Fmlog opened this issue 7 months ago • 4 comments

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

Fmlog avatar Dec 06 '23 16:12 Fmlog