fix(mobile): viewport size on keyboard focus (#1925)

packages/web/src/javascripts/App.tsx

@@ -60,7 +60,6 @@ const startApplication: StartApplication = async function startApplication(
 
   const setupViewportHeightListeners = () => {
     if (!isDesktop) {
-      setViewportHeightWithFallback()
       window.addEventListener('orientationchange', setViewportHeightWithFallback)
       window.addEventListener('resize', setViewportHeightWithFallback)
     }

packages/web/src/javascripts/setViewportHeightWithFallback.tsx

@@ -2,24 +2,15 @@ import { log, LoggingDomain } from './Logging'
 
 export const ViewportHeightKey = '--viewport-height'
 
-export const setViewportHeightWithFallback = () => {
-  const newValue = visualViewport && visualViewport.height > 0 ? visualViewport.height : window.innerHeight
-
-  if (!newValue) {
-    setCustomViewportHeight('100', 'vh')
-    return
-  }
-
-  setCustomViewportHeight(String(newValue), 'px')
-}
-
 /**
  * @param forceTriggerResizeEvent On iPad at least, setProperty(ViewportHeightKey) does not trigger a resize event
  */
-export const setCustomViewportHeight = (height: string, suffix: 'px' | 'vh', forceTriggerResizeEvent = false) => {
-  log(LoggingDomain.Viewport, `setCustomViewportHeight: ${height}`)
+export const setCustomViewportHeight = (height: number, suffix: 'px' | 'vh', forceTriggerResizeEvent = false) => {
+  const value = `${height}${suffix}`
 
-  document.documentElement.style.setProperty(ViewportHeightKey, `${height}${suffix}`)
+  log(LoggingDomain.Viewport, `setCustomViewportHeight: ${value}`)
+
+  document.documentElement.style.setProperty(ViewportHeightKey, value)
 
   if (forceTriggerResizeEvent) {
     window.dispatchEvent(new Event('resize'))