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

[Stephen]

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).

[spdegabrielle (Stephen De Gabrielle)]

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

[Stephen]

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.

[david (David Taylor)]

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

https://github.com/discourse/DiscourseMobile/commit/fe82683cffaac803d6f53f4746f5b60844bac627

[seanblue]

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.

[Don]

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.

Quick fix

Remove these from your custom theme

From Desktop theme_1

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

And from Mobile theme_1

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

Add these to your custom theme

Add this to common

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

Add this to desktop

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

Add this to mobile section

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

After these changes

Desktop:

Mobile:

[seanblue]

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

[Stephen]

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

[darkpixlz (Pyx)]

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

[cvx (Jarek Radosz)]

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. (not just on the latest iPhone)

[Stephen]

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

[cvx (Jarek Radosz)]

Yup, that one!