Footer menu style is broken when loaded from iphone home screen

[hslee33754]

OS: iOS 15.3.1
Browser: Safari (home screen)
Repro Steps:

1. Open https://www.ferry.fyi on iPhone Safari
2. Click the share icon from the url bar
3. Click "Add to Home Screen"
4. Open the page from the added home screen button
5. click any location to display footer menus

Footer menu style is broken when the page is loaded from the iPhone home screen. It looks fine when it is opened on a regular safari tab or other browsers. I did a little debugging and it looks like the env(safe-area-inset-XXXXX) values break the style.

Overwriting values to 0 on margin bottom on the Footer and the padding top and bottom on the child fixes it.

It might need to use a media query of [display-mode: standalone](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/display-mode) to make the spacing values conditional.

[anstosa]

Thanks for the debugging @hslee33754 ! Super helpful since I don't have an iPhone 😊

[hslee33754]

@anstosa Thank YOU for building this app. I've been wanting to build something like this, and I am loving it!

[anstosa]

Just pushed a potential fix based on your comment. Can't test so let me know if it works!

You may have to close the app from your recents and re-open it once or twice for the service worker to pick up the changes