Menu and search button size discrepency

[tomdoughty]

Bug Report

What is the issue?

Height difference between header buttons on mobile

There is a slight difference in the heights of the "menu" and "search" buttons in the header on iOS Chrome. Search appears to be a couple of pixels taller. I would expect the buttons to be the same height.

What steps are required to reproduce the issue?

Navigate the NHS.UK website in Chrome on Apple iPhone 11 Pro Max (possibly more devices) and you will see height difference as shown in attached screenshot

What was the environment where this issue occurred?

Include the following as a minimum e.g.

• Device: Apple iPhone 11 Pro Max
• Operating System: iOS 13.5.1
• Browser: Chrome
• Browser version: 84.0.4147.71
• NHS.UK frontend package version: Unknown... NHS.UK Wagtail site (possibly more apps effected) 23/7/2020
• Node version: Unknown... NHS.UK Wagtail site (possibly more apps effected) 23/7/2020
• npm version: Unknown... NHS.UK Wagtail site (possibly more apps effected) 23/7/2020

Is there anything else you think would be useful in recreating the issue?

Not replicated in MacOS Chrome mobile emulation making initial debugging more difficult

[mcheung-nhs]

Have checked on:

• iphone 8, Chrome 87.0.4280.77 (latest), iOS 13.5.1
• iphone 6s, Chrome 87.0.4280.77 (latest), iOS 14.3
• iPhone SE (1st Gen), Chrome 87.0.4280.77 (latest), iOS 14.3

and they all look OK.

[andymantell]

I can't reproduce this on the design system website. And the nhs.uk site itself seems now to have deviated anyway - and is showing the search box all the time.

Seems to me that this could probably be closed.