Frontend: iOS app tweaks needed for FABs and tab bars

[SeanPM5]

Checklist

• [x] I have updated to the latest available Home Assistant version.
• [x] I have cleared the cache of my browser.
• [x] I have tried a different browser to see if it is related to my browser.

The problem

The iOS app had a change in this PR https://github.com/home-assistant/iOS/pull/606 where it removed a safeAreaInsets setting. That was a good change since there were a number of issues before (the iOS "gesture bar" overlapping the tab bar for example, and the notch covering the content in certain cases). This change is present in the iOS 2020.1 app, which is not yet live in the store but will be very soon.

This requires a few adjustments on the frontend side, mainly for the FABs. They need to be placed a little higher on iOS. Provided some screenshots below to demonstrate how it looks.

The other thing I notice is that underneath the tab bars it appears to be showing the primary-background-color variable (#fafafa on the default theme) rather than extending the tab bar background color all the way down. Dunno if I explained that well enough, but here's an image of the Phone app on iOS for how it's supposed to look:

You can see that it's all one color from top to bottom, this is the desired behavior. When you look at the HA screenshots below you'll see it's two colors (white for the tab bars, gray for the gesture bar).

And here's some screenshots of how the FABs look:

Automations / Scenes / Scripts / Helpers tab bar:

Lovelace Dashboards tab bar:

Persons / Zones / Users tab bar:

Those are all the same placement, but the Integrations seems to have different behavior. Unlike all of the others, this one seems to be partially cut off and displays _underneath_ the tab bar.

There might be some more stuff but haven't played with this build long enough and going to bed now, just wanted to report this quickly.

One last thing to note, is that it probably displays different on an older iPhone (with home button). The tab bars are probably docked to the very bottom of the screen instead of being pushed up slightly? So if you make the FAB higher, it might be TOO high on those phones, I don't know. Don't have one of those older phones to test on, only have the iPhone 11 Pro.

Expected behavior

• Make the FABs display a little higher on iOS
• Make the tab bars look like the Phone app screenshot I posted above, it's supposed to be one color and not two.

Steps to reproduce

Environment

• Home Assistant release with the issue: 0.111.1
• Last working Home Assistant release (if known): n/a
• Browser and browser version: iOS App 2020.1
• Operating system: iOS 13.5.1

State of relevant entities

Problem-relevant configuration

Javascript errors shown in your browser console/inspector

Additional information

[zacwest]

There are a few thematic places that the frontend could handle safe area insets and make a huge improvement. It would probably be good to make the content extend into the safe areas as described in this webkit.org block post while also use the padding vars so we don't end up underlapping the home indicator or notch again.

• Tabs: at the bottom of the screen, e.g. the Integration/Devices/Entities/Areas in Configuration.
• Header (upwards): at the top of the screen. Right now the iOS app covers the top safe area with its own banner (the one place that safe areas are not re-enabled). If the frontend handled the top inset, that could go away and the frontend could have total control over it.
• Header (sideways): similar to extending up, in landscape and on iPads it would be great for the navigation bar to go left/right into the safe area.
• Vertical scroll height: since the safe area is currently insetting the height, a 100vh item is displayed in a <100vh container and thus scrolls. e.g. you can drag and move up and down the tab bars.