Remove WKWebView safeAreaInsets resetting

[zacwest]

I offer this change to start a conversation about how the safe area insets are handled in the webview that powers the frontend on iOS. I think that allowing the webview to handle the safe area on its own will work out better in the long run, and solves a lot of real frustrations that I have been running into.

Judging by the original commit being long enough in the past, and early enough in the iPhone X world, I'm hoping that the safe area problem can be handled a little cleaner.

There are a few cases that I believe are significantly improved with this change:

1. Landscape handling (practically anywhere)

On devices with safe area insets for the device bezel, e.g. the iPhone 11 I'm taking these screenshots in, the contents of the dashboards are actually obscured by the notch and large rounded corners of the device. I don't own one of the iPads with the safe area insets, but I'm guessing it's also frustrating there, too.

2. Configuration and the pseudo-tab-bars at the bottom

These pseudo-tab-bars are underneath the home screen indicator, which is an area that's fairly difficult (both mentally and physically) to tap.

There are a few minor issues that I'm seeing in the settings screens with safe areas re-enabled:

• The add FAB is being positioned what appears absolutely rather than relative to the container.
• There's an additional iframe or other container that's positioned based on the height of the screen, which gives an extra vertical scroll frustration.
  These feel very solvable to me, though I am absolutely awful at web development enough to know where to jump in there.

3. Content not given a margin when at the bottom

For example, when I'm scrolling to the bottom of a dashboard, it's a lot easier to read the bottom-most cards when the home screen indicator doesn't overlap them.

[SeanPM5]

I think this is a great idea and support this change, it would make the iOS experience much nicer imo.

The original setting was fine at the time, but the Home Assistant UI has evolved quite a bit since then. I created at least one issue for the landscape stuff before on the frontend repo (home-assistant/frontend#3534) and point number 2 with the gesture bar overlapping the tab bar especially frustrates me as well.

If Robbie approves this proposal I think that @bramkragten might be able to provide some direction/help on the FAB part.

[bramkragten]

Ah so the iOS app does it 😄

Yeah I believe iOS has media query rules we can use to place the FAB higher in this case.

[zacwest]

I believe (and this is old WWDC video knowledge possibly) that you can also extend the background of elements like the header into the safe area space in the page, so the header bar could be the fill-width (and extend vertically into the safe area, but the iOS app puts a background there right now).

[laposheureux]

Re, the above about full width parts: https://webkit.org/blog/7929/designing-websites-for-iphone-x/