iPhone web-app dashboard not anchored at top of screen

Vendors FlowFuse
1

Hi,

I have created a dashboard that functions properly and is responsive on both PCs and iPhones. However, I have one problem with the iPhone. Here, it is shown using the ui_template node with its default example code (added a frame).

I open the dashboard in Safari and place it on the home screen as a web app, then:

  1. When holding the phone in landscape orientation and opening the dashboard from the home screen, I get some white space above the dashboard like this:

IMG_0001
IMG_00011920×945 53.8 KB

(The bottom of my real dashboard actually drops down below the bottom of the screen)

  1. I then change the orientation of the phone to portrait, and the page responds correctly with the dashboard at the very top of the screen:

IMG_0002
IMG_00021920×3664 242 KB

  1. When I again change the orientation to landscape, the dashboard remains at the top, in the way I expected already when opening it in landscape orientation.

IMG_0004
IMG_00041920×980 61.8 KB

This is on an iPhone 16 Pro Max with the latest iOS 18. A dashboard based on the original NodeRed dashboard does not behave like this.

Is there anything I can do about this?