Fix header with product name focus and hover state length

[owenatgov]

What

Changes the desktop display properly of the header homepage link from inline-block to inline.

Why

Addressing part of #2181

You can test this by starting a local review app, going to the header component and looking at the focus and hover states of "header with product name".

Visual changes

Focus state

Before:

After:

Hover state

Before:

After:

[vanitabarrett]

@owenatgov Nice work on picking this up 👍 In the 'after' screenshot, I can see the bottom of the GOV.UK text gets cut off a little bit (more noticeable on the 'G' and dot), which probably isn't ideal. I wonder if there's anything we can do to stop that?

[owenatgov]

@vanitabarrett Good spot, how strange! It looks like this is coming from the box-shadow applied by the focus state. I'm just trying to work out why it's doing that; I don't really want to turn off a feature of our focus state.

[owenatgov]

@vanitabarrett I've found a solution that involved amending the box-shadow of the focus state. I'm not 100% comfortable with it but it's the best solution that didn't involve changing the height of the header, which I want to avoid. Let me know what you think.

[vanitabarrett]

Hm, I'm not 100% sure about this change. I think the change from inline-block to inline means that on super narrow screens things start getting cut off, whereas before they'd maintain the right size and overflow the container instead.

Example:

Before (234px wide)

After (234px wide)

Unfortunately I don't really have any other suggestions... I am wondering if this work would get any easier if we solved #1501, but maybe not.

[owenatgov]

@vanitabarrett Bugger. I think you're right that the root of this is elsewhere. I'm pretty sure that issue is linked to this so I'll investigate if there's a way to solve both of these.

[owenatgov]

@vanitabarrett After assessing this a bit more, I reckon #1502 is going to take a more thorough investigation. For now I've found a quick fix that solves the small screen problem by using a media query to control the display: inline change. Let me know what you think.

[vanitabarrett]

@owenatgov Thanks for digging into it a bit! I agree, it might need a more thorough investigation. I quite like this quick fix, nice work 👍 I'm wondering if the box-shadow change should also be inside the media query, as we're essentially not changing the focus state at all in lower breakpoints?

[owenatgov]

@vanitabarrett 100%. Applied!

[vanitabarrett]

As mentioned in Slack, this just needs a Changelog entry and then it should be ready to go

[vanitabarrett]

@owenatgov Would you also mind adding the linked issue to the [next] milestone (indicating it will be release in the next version of GOV.UK Frontend)?