Bottom menu in iPhoneX

[farskid]

Describe the bug
The iPhone X virtual home button indicator conflicts with the app's bottom navbar.

Screenshots

Smartphone (please complete the following information):

• Device: iPhone X
• OS: iOS 12
• Browser Chrome
• Version ¯_(ツ)_/¯

[fpapado]

iOS strikes again 😬

This led me down a fun read on Webkit about safe areas in CSS.
I have a WIP PR at: #19

@farskid, could you visit the PR app at https://ephemeral-v2-git-improvement-iphone-safe-area-inset.fpapado1.now.sh/ and check whether the safe area is inserted? If not, we'll keep looking!

[farskid]

Unfortunately it has the same problem still.

[fpapado]

I tweaked the bottom padding with the supports query to be larger, I think that might work now.

It's still not as correct of a solution, but apparently iOS doesn't give accurate safe area insets for the home bar, unless you opt in to handling the notch manually as well. So if it works with these values, I'll merge it and look to supporting the full screen when I have a device to test.

[fpapado]

After #20, the more correct values should now also factor into the calculation. Though this is iOS, so I trust nothing 😅
Can you have a look on the production app and see if it's changed? Might have to wait for the "new version available" message to pop up first.