GUA-854: Enlarge target area for service nav links

[danacotoran]

There was some feedback suggesting improvements for the focus state on the service links on the One Login header.

The feedback was reviewed by UCD and there was agreement that the target area for the links should be increased to take up the entire height of the nav bar in the desktop variation of the header.

This eliminates the unsightly double border when an active link is focused. https://govukverify.atlassian.net/browse/GUA-854

Before

https://github.com/alphagov/di-govuk-one-login-service-header/assets/7116819/6147fcfe-ec69-4db1-a410-076aec56df7a

After

https://github.com/alphagov/di-govuk-one-login-service-header/assets/7116819/0b147c87-679d-4808-98fe-7cddff83acae

[frankieroberto]

@danacotoran @gtvj thanks team! Much better.

I did notice that the 'hit area' is still 10px smaller in height than the area that's highlighted when focused (5px on top and 5px on the bottom). Is there any reason for this?

I think ideally it'd make sense to increase the hit area to the full height of the bar, so that you can also tap/click at the very top or the very bottom?

[danacotoran]

Hi @frankieroberto no problem, thanks for raising this.

The hit area is indeed a bit smaller still which isn't perfect, but this is to balance design requirements with the requirement to have a larger hit area without introducing too much complexity or implementing anything too hacky. When the name of the service is really long, or the list of links is really long, we've opted for a stacked design where the list of links moves underneath the service heading.

To achieve the specific visual spacing in our design, I transferred 5px which would otherwise be additional padding-top on the links to the containing element so the layout really looks a little something like this.

Even though the "very long service name and/or nav" scenario is a bit of an edge case, I think it's important for the nav to scale as elegantly as possible so that's why I landed on the current solution.

The space between the heading and nav when they are stacked is still a little bit larger than the design but I thought this was a decent compromise. I considered other ways of achieving the same spacing, toying with collapsing margins for instance, but I am using flex for the layout so that idea is out.

Hope that makes sense

[frankieroberto]

@danacotoran thanks for the explanation. That's a tricky problem!

I think in this instance it could be acceptable to design for the common case of not having long service names / navigation links (which presumably would be the recommendation to teams?).

Then, if the service name or links were long enough to require stacking, but this can't be done with pure CSS, you could require teams to add an extra css modifier class? (something like service-header__container--stacked maybe)? This approach could also be used to allow services with smaller names + links to use a bigger font (see #7).

The 10px difference between the focus area and the hit area isn't a huge deal, but it does feel a bit unexpected to me.