Fix layout_header layout and spacing issues

[danacotoran]

What

Fix header navigation layout issue which happens on tablet breakpoints on GOVUK Accounts.
Fix spacing issue which occurs when layout_header is used by applications using static.

Why

Currently, the layout header component looks different in the context of static vs in isolation. This is because this component shares some classes with the hardcoded #global-header from static, as well as some layout classes from the Design System.

• on the account manager, which does not use static, the layout header navigation does not align as intended with the rest of the header on tablet breakpoints

Before

After

• in the context of an application that uses static (screenshots below are from finder-frontend), the layout header inherits some styles from static. Additionally, application CSS conflicts with the layout_header CSS resulting in spacing issues, such as extra padding pictured below

Before	After

Before

After

This aims to address some of these problems by removing unnecessary classes, as well as increasing layout_header CSS specificity where this CSS might be overruled by external styles from either static or the parent application's stylesheet.

[alex-ju]

My main concern with this change is that we are moving away from the Design System component by removing classes (such as govuk-header__content) instead of building on top of it when necessary.

As Accounts doesn't use static, we should be able to use the Design System component (markup and classes) without any issues, and if we need to define additional rules to make the header compatible with static, then we wrap those rules in a compatibility block as you previously did with other elements. By doing so we build on top of that component and we can remove the additional styles at a later stage, rather than diverging.

[danacotoran]

Thanks @alex-ju, all good points. I think I've managed to make the necessary adjustments without touching the markup.
It's mostly just padding adjustments + a bit of CSS that was missing at the component level (in the context of static these styles would be inherited from static's header-footer-only stylesheet. Accounts doesn't use static so it has some layout issues as a result of those styles not being there).

[alex-ju]

Thanks @alex-ju, all good points. I think I've managed to make the necessary adjustments without touching the markup.
It's mostly just padding adjustments + a bit of CSS that was missing at the component level (in the context of static these styles would be inherited from static's header-footer-only stylesheet. Accounts doesn't use static so it has some layout issues as a result of those styles not being there).

Thank you for working on this, @danacotoran! I have tested it on the public and admin layout and fixes mobile/tablet navigation issue as expected. May I suggest we update the changelog entry (and PR description) to be more clear what this fix does (e.g. Fix header navigation layout on mobile/tablet)?

Hopefully, the static overrides will go soon and we'll get the chance to refactor this component and remove such oddities that cause the sole component to be broken.

[injms]

I'm seeing a similar problem whilst trying to switch an app to use the gem's public layout (for example, alphagov/calculators#1033 and alphagov/static#2411) - so once the apps aren't using styles from static itself, we should be able to update the component to just work properly. Fingers crossed anyways...