UKHSA-Internal/coronavirus-dashboard

Banner layout problems in Firefox at certain zoom levels

Opened this issue · 0 comments

Describe the bug

At certain zoom levels, the first banner on the home page and detail pages is squashed in Firefox.

For me (on a 4k screen) this happens by default but on more common configurations it typically requires zooming out to reproduce.

To Reproduce

  1. Go to https://coronavirus.data.gov.uk/ in Firefox
  2. Zoom out until the first banner becomes squashed
  3. Repeat for https://coronavirus.data.gov.uk/details/cases

Expected behaviour

The banner should not be squashed.

Screenshots

Home page:

image

Cases:

image

Desktop (please complete the following information):

  • OS: Windows 10 21H2
  • Browser: Firefox
  • Version: 95

Additional context

This is not a new problem. It has been present for some time.

Adding clear: left to the div containing the banners fixes it (probably as .govuk-header__logo is using float: left).