From 887402f75fe7d03a376e42446661f6b43a2c372c Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 8 Aug 2022 14:32:16 +0530
Subject: [PATCH] fix: viewport height on mobile Chrome & Safari (#1376)

---
 packages/web/src/javascripts/App.tsx    | 10 ++++++++++
 packages/web/src/stylesheets/_main.scss |  4 ++++
 2 files changed, 14 insertions(+)

diff --git a/packages/web/src/javascripts/App.tsx b/packages/web/src/javascripts/App.tsx
index 393ed161f..a2e4b775f 100644
--- a/packages/web/src/javascripts/App.tsx
+++ b/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()}
diff --git a/packages/web/src/stylesheets/_main.scss b/packages/web/src/stylesheets/_main.scss
index ef139acc1..3c14f449c 100644
--- a/packages/web/src/stylesheets/_main.scss
+++ b/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);