Header messes up on mid-size viewports on the Horizon Theme

[nathank (Nathan Kershaw)]

The header on Horizon works really well most of the time, across mobile and desktop:

However, I’ve got a folding phone with a weird aspect ratio. Unfortunately the search bar and avatar disappear and everything goes a bit awry:

This seems to be for 640-767px width - unfortunately where my foldy sits!

[Lilly (Lillian)]

i can repro this too - the problem appears to be the contents class inside the header displaying grid at the folding phone/small tablet viewport size @media (min-width 640px) (max-width: 767px):

it can be patched up by changing the property to contents for that range of width:

@media (min-width: 640px) and (max-width: 767.98px) {
  .d-header>.wrap .contents {
    display: contents!important;
  }
}

i think discourse uses 768px for the tablet/desktop boundary

---

edit: disabling this setting seems to fix it for me (i forgot this was still there):

[nathank (Nathan Kershaw)]

I find that setting makes it worse though!! With it off, the header is scrambled at all sizes up to 767 unless the device is specified as mobile.

But at least my folding phone is happy. Just not my desktop browser when things get small.