Black bar at top of screen on iPhone 17 after update to iOS App 3.1

,

Since the last openHAB iOS app update (installed a few days ago), a black bar appears at the top of the screen on my iPhone 17.

This black area was not present before the update and reduces the usable screen space.

I have attached a screenshot showing the issue.

Is this a known problem and is there a solution for it?

Sorry, I don’t have the answer. This does not happen on my more “standard” overview page in the new iOS app. I was wondering however how you achieved the overview page. I looks really amazing. How did you manage to:

  • let the background image reach until the top of the screen,
  • replace the standard material icons,
  • get the icons in the bottom right corner of the cells?

Perhaps someone can figure the solution to out your problem if you share your YAML code?

I can confirm this as well.

I’m seeing the same black bar at the top, but only when accessing the page via /overview.
If I open the exact same page via /page/overview, the black bar is not present and the full screen height is usable.

I already noticed this behavior during the TestFlight phase, but unfortunately didn’t have time to report it back then. From my perception, this started sometime in Q4 2025.

So this might be related to the overview routing or how the safe area / header is handled there, rather than the page content itself.

BTW: how did you implement the “Good evening” text in the header?
Is this a custom widget or a specific UI setting?

@digitaldan FYI


Not sure i understand actually, @BastianR i see the iOS status bar, is this what you are talking about ? I’m looking at an older version of the app (v1) and the only difference i am seeing is it seems like the bounds are the same, but we would render the overflow under the menu bar, which now that i look at it i think should be added back in (its a nice effect). Just want to be clear what the problem is.

I cant speak for @BastianR but in my case I am talking about this gap

Please try this in Safari (ios / desktop), my guess is its the same behavior? In which case its an issue with the MainUI and will need to be fixed there.

You’re absolutely right – thanks for pointing this out.

I just tested the same page in Safari (iOS and desktop) and I can reproduce the exact same behavior there as well. So this is clearly not an app-specific issue but related to MainUI itself.

My initial assumption was wrong. The timing just happened to coincide with an App TestFlight update and a MainUI update, which led me to the wrong conclusion.

Sorry for the confusion, and thanks for the clarification!

Do you know where to raise this issue!

Not a problem, a lot changed during this release. I would open a ticket up at https://github.com/openhab/openhab-webui/issues , and include some screenshots which very clearly show the issue, as its hard to see initially.

Hey Guys, thank you for your replies!

@digitaldan You’re right. I’m talking about the IOS status bar. When I activate the light-theme it is a little bit more clearly, what i mean:

I also took a look into the old version of the app (v1) and here we can see the difference:

I should also mention that this behavior doesn’t only occur on the Overview, but on all other pages as well.

Below are few examples:

In Safari it is the same behavior. Therefore, I think you are correct in your assumption that it is a issue with the main UI.

@mvbergen Thank you for your compliment! :slight_smile: It took me a lot of time to design the UI like this.

This page in the screenshot is not the original overview-page. It’s a normal layout page, which I’ve designed like the overview-page with my own features.

You can let the background image reach the top of the screen, if you add below CSS styles in the code section of your page:

    height: 100vh
    top: -16px
    width: 100vw

The icons are all from iconify: https://icon-sets.iconify.design/

The cells are independent widgets. There you can move the position of the icons or other element with the css styles “margin-right” and “margin-right”.

@Anpro The “Good Evening” text is the result of a custom widget.

1 Like

Looks great - do you mind sharing your page and widget code?

THX again - ticket is opened: MainUI: Empty vertical space below header on /overview but not on /page/overview · Issue #3652 · openhab/openhab-webui · GitHub