Sites via DiscourseHub clashing with top bar elements on iPhone 14 Pro Max

Sites through Safari are fine:

Whereas the same sites via DiscourseHub clash at the top of the screen:


Testing both Light and Focused Sidebar themes.

It’s pretty hard to activate anything in the top bar of the site while they overlap like this.

iPhone 14 Pro Max, iOS 16.0.1 (current retail release).

3 Likes

I just commented on Titlebar is not displaying properly - #13 by spdegabrielle but now I see your post I think they might be related

1 Like

I’ve been participating in that one too, it relates more to the focused sidebar theme. This one is hardware-specific. As a result one of my screenshots above exhibits both.

1 Like

Thanks @Stephen - we have a fix for this in the pipeline, and will update here when it’s released

7 Likes

It’s a bit hard to tell, but is this the same as what I’m seeing here on https://community.wanikani.com? The difference is, I’m seeing this on both desktop and mobile browsers (I don’t use DiscourseHub), so I wasn’t sure.

I think this is because it’s use height: 100% on logo.

.d-header {
  #site-logo.logo-big {
    height: 100%;
  }
}

Probably a good idea to add to the core #site-logo max-height: var(--header-offset) to prevent this. :thinking:

Quick fix :arrow_down_small:

Remove these from your custom theme

From Desktop theme_1
Screenshot 2022-09-17 at 17.42.59

.d-header {
  #site-logo.logo-big {
    height: 100%;
  }
}

And from Mobile theme_1
Screenshot 2022-09-17 at 17.46.52

.d-header {
  #site-logo {
    height: 100%;
    max-height: 100%;
  }
}
Add these to your custom theme

Add this to common :arrow_down_small:

.d-header {
  #site-logo {
    height: 100%;
    max-height: var(--header-offset);
  }
}

Add this to desktop :arrow_down_small:

.d-header {
  #site-logo.logo-small {
    height: 2.667em;
  }
}

Add this to mobile section :arrow_down_small:

.d-header {
  .title {
    max-width: 100%;
    #site-logo.logo-small {
      max-height: 2.4em;
    }
  }
}

After these changes :arrow_down_small:

Desktop:

Mobile:
Screenshot 2022-09-17 at 18.04.00

2 Likes

Thanks for the suggestion. Unfortunately I’m not an admin for the site, so I can’t do much.

The Discourse Hub update hit the iOS App Store and everything is looking good once again.

2 Likes

I believe this may be iOS 16? I see you’re using it, and I had this issue on Roblox today.

1 Like

iPhone 14 Pro compatibility has been released in Discourse Hub 1.8.3!

Let me know if there are any more collisions between forum header and the iOS interface. :smiley: (not just on the latest iPhone)

4 Likes

Is that the release from six days ago, or another?

1 Like

Yup, that one!

3 Likes