Frontend: Add new integration screen partially cut off in landscape on iPhone

[SeanPM5]

Home Assistant release with the issue:
0.98.0b2

UI (States or Lovelace UI?):
Lovelace

Browser and Operating System:
iOS 13.1b / HA iOS 2.0b62 app

Description of problem:
When adding a new integration, the dialog that pops up appears to be left-aligned on my iPhone XS rather than centered like on my iPad.

This means that when holding an iPhone X or newer in landscape, the notch can cover up the first two letters (see attached image below). Quite a few integration names are only 4-5 letters long (LIFX, Wemo, Sonos, Toon, IFTTT, Nest etc) so half their name could be obstructed in landscape.

Users can rotate their device to portrait mode in order to read things, so it's not an urgent issue or anything, more of a visual thing.

[iantrich]

Notches are the best...

[iantrich]

Even if we center this, honestly, isn't this an upstream issue? Why is the web browser displaying content in this way? Is the sidebar then an issue as well? This could could go on and on...

[SeanPM5]

Majority of the UI (including the sidebar) works fine in landscape. In some places there are minor cosmetic issues like the notch partially covering an icon or whatever, but this is the only place I've found where actual text gets cut off.

There are two issues here I think:

1. On mobile devices it appears that dialogs always open in the bottom left corner, rather than being centered (like on my iPad and desktop). This is fine on portrait but can cause some issues on landscape as seen in my screenshot below.
2. I think that it's lacking CSS for "safe area inset" according to this blog post from the Safari/WebKit team? https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Initially I thought this was just the "add new integration" screen but it happens on _all_ dialogs in the Integrations section (config flow, system options, etc).

[bramkragten]

So Apple designs a phone with all kind of functions that interfere with existing websites and then they just say all websites should be updated for our device! 🤦‍♂If they would instead just make the screen a little smaller for websites that didn't adopt the special new non standard css functions that Apple added for their new device, everything would just work...

[iantrich]

closing in favor of older https://github.com/home-assistant/home-assistant-polymer/issues/2049

[nikolaykasyanov]

@bramkragten interestingly, the first sentence in the linked post says precisely that:

Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing.

Not sure why that's not actually the case here though.

[SeanPM5]

Closing this issue as I found out today this is something set on the iOS app side, not frontend: https://github.com/home-assistant/iOS/pull/606

[nikolaykasyanov]

Even if the change is applied to the iOS app, it won’t fix this in plain Safari, though.

[SeanPM5]

@nikolaykasyanov My understanding is that Safari applies the inset automatically, so it should work fine there. The problem here is that the iOS app was overriding the default behavior.

I use the iOS app exclusively so don't really know how it looks in mobile Safari, I will try later and reopen this if necessary.

[nikolaykasyanov]

@SeanPM5 Safari definitely does a lot automatically out of the box, but there are still a few issues, like missing bottom insets here and there when Safari bars are hidden after scrolling.

[SeanPM5]

@nikolaykasyanov thanks for the confirmation, meant to test this but got preoccupied. Re-opening this issue now.

[bramkragten]

Could you specify those issues in a list?

[nikolaykasyanov]

Just noticed "Add support for safe area insets" in Home Assistant Core 0.114.0 release notes, seems like the issue have been addressed 🎉 Thanks!