From 1e3acd50e941051636ae2c92d143c649913b3c1a Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 7 Oct 2022 15:41:45 +0530
Subject: [PATCH] fix: add fallback for viewport height on mobile (#1766)

---
 packages/web/src/javascripts/App.tsx              | 15 ++++++++-------
 .../src/javascripts/Application/Application.ts    |  8 ++++++--
 packages/web/src/stylesheets/_main.scss           |  2 ++
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/javascripts/App.tsx b/packages/web/src/javascripts/App.tsx
index a98415b8a..a64997680 100644
--- a/packages/web/src/javascripts/App.tsx
+++ b/packages/web/src/javascripts/App.tsx
@@ -41,16 +41,17 @@ const getKey = () => {
   return keyCount++
 }
 
-const setViewportHeight = () => {
+export const setViewportHeightWithFallback = () => {
   const currentValue = parseInt(document.documentElement.style.getPropertyValue('--viewport-height'))
   const newValue = visualViewport && visualViewport.height > 0 ? visualViewport.height : window.innerHeight
+  const supportsSVHUnit = CSS.supports('height', '1svh')
 
   if (currentValue && !newValue) {
     return
   }
 
   if (!currentValue && !newValue) {
-    document.documentElement.style.setProperty('--viewport-height', '100vh')
+    document.documentElement.style.setProperty('--viewport-height', supportsSVHUnit ? '100svh' : '100vh')
     return
   }
 
@@ -79,9 +80,9 @@ const startApplication: StartApplication = async function startApplication(
 
   const onDestroy = () => {
     if (device.environment === Environment.Desktop) {
-      window.removeEventListener('resize', setViewportHeight)
+      window.removeEventListener('resize', setViewportHeightWithFallback)
     }
-    window.removeEventListener('orientationchange', setViewportHeight)
+    window.removeEventListener('orientationchange', setViewportHeightWithFallback)
     const rootElement = document.getElementById(ElementIds.RootId) as HTMLElement
     root.unmount()
     rootElement.remove()
@@ -96,10 +97,10 @@ const startApplication: StartApplication = async function startApplication(
 
     disableIosTextFieldZoom()
 
-    setViewportHeight()
-    window.addEventListener('orientationchange', setViewportHeight)
+    setViewportHeightWithFallback()
+    window.addEventListener('orientationchange', setViewportHeightWithFallback)
     if (device.environment === Environment.Desktop) {
-      window.addEventListener('resize', setViewportHeight)
+      window.addEventListener('resize', setViewportHeightWithFallback)
     }
 
     setDefaultMonospaceFont(device.platform)
diff --git a/packages/web/src/javascripts/Application/Application.ts b/packages/web/src/javascripts/Application/Application.ts
index f3b7cab13..9309ed76c 100644
--- a/packages/web/src/javascripts/Application/Application.ts
+++ b/packages/web/src/javascripts/Application/Application.ts
@@ -28,6 +28,7 @@ import { ArchiveManager, AutolockService, IOService, WebAlertService, ThemeManag
 import { MobileWebReceiver } from './MobileWebReceiver'
 import { AndroidBackHandler } from '@/NativeMobileWeb/AndroidBackHandler'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
+import { setViewportHeightWithFallback } from '@/App'
 
 type WebServices = {
   viewControllerManager: ViewControllerManager
@@ -233,8 +234,9 @@ export class WebApplication extends SNApplication implements WebApplicationInter
     await this.lockApplicationAfterMobileEventIfApplicable()
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  async handleMobileGainingFocusEvent(): Promise<void> {}
+  async handleMobileGainingFocusEvent(): Promise<void> {
+    setViewportHeightWithFallback()
+  }
 
   async handleMobileLosingFocusEvent(): Promise<void> {
     if (this.protections.getMobileScreenshotPrivacyEnabled()) {
@@ -248,6 +250,8 @@ export class WebApplication extends SNApplication implements WebApplicationInter
     if (this.protections.getMobileScreenshotPrivacyEnabled()) {
       this.mobileDevice().hideMobileInterfaceFromScreenshots()
     }
+
+    setViewportHeightWithFallback()
   }
 
   private async lockApplicationAfterMobileEventIfApplicable(): Promise<void> {
diff --git a/packages/web/src/stylesheets/_main.scss b/packages/web/src/stylesheets/_main.scss
index cde659190..eabe93e8e 100644
--- a/packages/web/src/stylesheets/_main.scss
+++ b/packages/web/src/stylesheets/_main.scss
@@ -34,6 +34,8 @@
   @media screen and (max-width: 768px) {
     --sn-stylekit-font-size-editor: 1rem;
   }
+
+  --viewport-height: 100vh;
 }
 
 html {