fix: viewport height on mobile Chrome & Safari (#1376)

packages/web/src/javascripts/App.tsx

@@ -39,6 +39,10 @@ const getKey = () => {
 
 const RootId = 'app-group-root'
 
+const setViewportHeight = () => {
+  document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`)
+}
+
 const startApplication: StartApplication = async function startApplication(
   defaultSyncServerHost: string,
   device: WebOrDesktopDevice,
@@ -54,6 +58,8 @@ const startApplication: StartApplication = async function startApplication(
     const rootElement = document.getElementById(RootId) as HTMLElement
     root.unmount()
     rootElement.remove()
+    window.removeEventListener('resize', setViewportHeight)
+    window.removeEventListener('orientationchange', setViewportHeight)
     renderApp()
   }
 
@@ -63,6 +69,10 @@ const startApplication: StartApplication = async function startApplication(
     const appendedRootNode = document.body.appendChild(rootElement)
     root = createRoot(appendedRootNode)
 
+    setViewportHeight()
+    window.addEventListener('resize', setViewportHeight)
+    window.addEventListener('orientationchange', setViewportHeight)
+
     root.render(
       <ApplicationGroupView
         key={getKey()}

packages/web/src/stylesheets/_main.scss

@@ -108,8 +108,12 @@ p {
 }
 
 .main-ui-view {
+  // Fallbacks
   min-height: 100vh;
   height: 100vh;
+  // Mobile-corrected viewport height
+  min-height: var(--viewport-height);
+  height: var(--viewport-height);
   position: relative;
   overflow: auto;
   background-color: var(--editor-header-bar-background-color);