Perform browser testing on Service Header component

[querkmachine]

What

Test the Service Header component in the browsers in GOV.UK Frontend's support remit.

We now use a graded system for determining browser support, so there isn't a definitive list of browser versions to test outside of some lower bounds. See our browser support documentation for information on how graded support works.

Assistive technology testing is covered by #3811.

Why

The Service Header is a major new component and should ideally work in as many contexts as possible.

Who needs to work on this

• Developers

Who needs to review this

• Developers

Done when

• A testing grid has been put together
• All browsers and scenarios in the testing grid have been tested
• Any issues encountered have been fixed or raised as new issues

[querkmachine]

I've started testing and recording the results in this spreadsheet (internal only).

[querkmachine]

There were two issues identified in the initial round of browser testing, which only covered a subset of those in the testing grid.

• At certain viewport sizes, the service name and navigation menu could collide due to a lack of margin being defined between them. This occurred on all browsers.
• On Internet Explorer 11, long navigation menus would not wrap and would continue off the side of the viewport, introducing a horizontal scrollbar.

Both of these issues were subsequently fixed.

I've now retested the component against all the browsers in the grid. There were two browsers that I was unable to test: Safari 17.2 (macOS) and Safari 10.3 (iOS) due to these browsers being unavailable or unusable in Browserstack. I have found no issues with the other browsers tested.

(N.B. We make no guarantees that Grade C and X browsers will receive manual testing or will look/behave the same as other browsers.)