[RW-826][CD-530] Reduce CLS in Global Header

[rupl]

RW-826 / CD-530

Types of changes

• Improvement (non-breaking change which iterates on an existing feature)
• ✔️ Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Security update (dependency updates, or to fix a vulnerability)

Description

Improves the Cumulative Layout Shift (CLS), a Core Web Vital that is very important to Google and its search results.

Steps to reproduce the problem or Steps to test

1. Load branch and stuff.
2. Using the devtools of your choice, do the following:
   • Disable caching, or start with a private browsing window
   • Throttle the network to something slow (so that you can see the effect)
3. Load the page and observe that the Help/User menus consistently render to the right of the Global Header (in LTR). They should NEVER appear on the left, even momentarily.

Example video:

RW-826-demo.mov

Impact

If the cd-global-header.html.twig file is overridden in the sub-theme, it will need to have the new line of HTML inserted, or the OCHA Services menu will never display.

@left23 if you could double-check this aspect that would be most helpful. I reviewed all the base-theme and sub-theme templates and believe I got the impact instructions correct. But your confirmation would be most helpful. If you agree, go ahead and tick the last checkbox in the checklist.

PR Checklist

• I have followed the Conventional Commits guidelines.
• I have made changes to the sub theme to reflect those in the base theme

[left23]

This looks good! I tested locally on RW and I think the steps are accurate.
Most sites will have a cd-global-header.html.twig override file. From what I can see, all include an extend from @common_design/cd/cd-header/cd-global-header.html.twig so no negative impact expected. https://github.com/search?q=org%3AUN-OCHA%20cd-global-header.html.twig&type=code

[rupl]

That was my thinking as well with the extend sub-theme template. Great, then the instructions are accurate. Thanks for the 👀