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

[Fmlog]

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

[roshaanbajwa]

Hi Femi, thanks for submitting this issue, what browser dimensions are you seeing this sizing issue on?

[andymantell]

The header doesn't cater for this currently at all - it's currently hardcoded to a set width in the nhsuk-header__container class. We'd need to create a new variant of the header. Applying the .nhsuk-width-container-fluid class to that element isn't quite enough.

We could also consider removing the hardcoded width from the header's styles completely, and putting a div.nhsuk-width-container or div.nhsuk-width-container-fluid in there. I.e. re-use those elements rather than having it fixed in the header.

[andymantell]

Before the recent header refactor, the header markup looked like this:

So if someone wanted to make it go full width. You would just change that class to -fluid

After the refactor, the header markup looks like this:

and the width of that container is hardcoded in the header css.

The best way to fix this I think would be to revert that decision - remove the hardcoded width from the scss and reinstate that class in the markup.

[Fmlog]

Hi Roshan,

Screen dimension: 1920px width 1080p

I just checked again to see if it was a fluke but it is not. I downgraded and upgraded again and the behaviour was replicated.

Andy's observation is right, the new styles in the nhsuk-header__container are the culprit.