Fix the bottom bar going off-screen on mobile

[illright]

Desktop browsers

There are no dynamic UI elements (that I'm aware of), so any method that creates a full-screen page will position the bottom bar correctly.

• 100vh (this seems to be the first thought)
• html, body { height: 100%; } (this is recommended as it apparently works better on mobile)
• JS height calculation

Mobile browsers

On the latest and greatest iOS 15, we can use safe-area-inset-bottom, as described in this article with cool animated illustrations.

As mentioned above and referenced from this Chromium bug, setting the 100% height on html, body should do something.

Also for certain other WebKits on iOS, there is -webkit-fill-available, and its usage is described here.

[illright]

An important point is that there is no scrolling in this app, so the navigation UI of browsers is not going to be dynamic.