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.

[nathank (Nathan Kershaw)]

@Lilly

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

I think that this setting has now disappeared, so there is no longer a workaround.

The problem still remains with Horizon.

[chapoi]

@nathank

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.

@nathank

The problem still remains with Horizon.

Could you help me diagnose this, because atm when repro’ing via desktop sim (I don’t have a folding phone), I don’t see anything out of the ordinary.

[nathank (Nathan Kershaw)]

I can reproduce it by simply narrowing the window of my browser on my desktop:

When sufficiently wide:

A bit narrower, and a few weird things happen (sidebar / header go white) which I’m not super sure is intentional:

Narrower highlights the problem (i.e. folding phone size)

Very narrow (normal phone size) is fine again.

[chapoi]

@nathank

A bit narrower, and a few weird things happen (sidebar / header go white) which I’m not super sure is intentional:

It is.

@nathank

Narrower highlights the problem (i.e. folding phone size)

I legit don’t get this, this is at 644px:

At no width does the avatar disappear for me.

Can you repro this here on Meta (with Horizon)?

[nathank (Nathan Kershaw)]

Ah - I forgot I could do that for repro stuff! No, it doesn’t repro for me on Meta with Horizon either.

I guess this is a problem with my site then - I’ll go and troubleshoot it at my end and let you know what I turn up. Thank you for looking into it!!!

[nathank (Nathan Kershaw)]

Wow, it was surprisingly easy to find the problem.

This theme component isn’t compatible with Horizon:

Left side hamburger menu on mobile

One thing we never got around to and caused some confusion after our work on Full height, slide out hamburger menu was that the hamburger menu, on the right side, opens a menu from the left side. For those interested in rearranging the header, this is for you: [Screenshot from 2020-09-18 12-19-27] Mobile menus appearing in the upper-left corner of the screen is not very reachable single-handedly which is why this is a standalone theme component. Options, yanno? …

And I love that TC!! I can’t stand the menu jumping over to the right on mobile. It is the little things that drive us crazy (well, some of us), eh? Maybe I like it there because I’m left handed.

[chapoi]

Yeah, I get that.

Feel free to drop a note in the OG Horizon Theme topic, where we said:

@Discourse

Partial compatibility

Please let us know if compatibility with this feature is important to you; that will help us prioritize improvements to the theme component / plugin or Horizon.

[Lilly (Lillian)]

i use that component too (i feel the same way about the sidebar icon, although i don’t like or use horizon) and have done work on that component. i’ll see if i can do a fix for it Nathan.

[Lilly (Lillian)]

heya Nathan, i have a fix here:

Left side hamburger menu on mobile

Hey @featheredtoast i have a PR here to fix the header issue with Horizon theme in viewport sizes for folding phones and some tablets. will let you have a look and merge it:

[nathank (Nathan Kershaw)]

Lilly, you rock! Currently enjoying both my left side hamburger AND Horizon on my foldie.

Wonderful!!!