Hide browser address bar and button when installed as a web app

[mrgnw]

Creating an issue to enable fullscreen PWA display (adding display: standalone to the web manifest)

Discussed in #1251

^{Originally posted by mrgnw January 15, 2025}
I enjoy having Teable installed as a web app* ("Add to Home Screen" on iOS) but there's one annoyance — by default, the default browser UI takes up a lot of space.

Solution

We can make Teable fullscreen in these cases by adding a web app manifest and defining display: standalone.

In the example I provided on iOS, we'd gain space at the top by hiding the address and at the bottom by hiding the buttons.

web manifest docs:

• https://developer.mozilla.org/en-US/docs/Web/Manifest
• https://web.dev/articles/add-manifest#display

• "web app" usage:

• iOS: Add a shortcut to the Home Screen on iPhone or iPad
• Android: Use web apps