refactor: remove reliance on viewport height in favor of body (#1926)

packages/web/src/javascripts/App.tsx

@@ -25,7 +25,7 @@ declare global {
 
 import { disableIosTextFieldZoom } from '@/Utils'
 import { IsWebPlatform, WebAppVersion } from '@/Constants/Version'
-import { DesktopManagerInterface, Environment, SNLog } from '@standardnotes/snjs'
+import { DesktopManagerInterface, SNLog } from '@standardnotes/snjs'
 import ApplicationGroupView from './Components/ApplicationGroupView/ApplicationGroupView'
 import { WebDevice } from './Application/Device/WebDevice'
 import { StartApplication } from './Application/Device/StartApplication'
@@ -34,8 +34,6 @@ import { WebOrDesktopDevice } from './Application/Device/WebOrDesktopDevice'
 import { WebApplication } from './Application/Application'
 import { createRoot, Root } from 'react-dom/client'
 import { ElementIds } from './Constants/ElementIDs'
-import { MediaQueryBreakpoints } from './Hooks/useMediaQuery'
-import { setViewportHeightWithFallback } from './setViewportHeightWithFallback'
 import { setDefaultMonospaceFont } from './setDefaultMonospaceFont'
 
 let keyCount = 0
@@ -54,27 +52,7 @@ const startApplication: StartApplication = async function startApplication(
   SNLog.onError = console.error
   let root: Root
 
-  const isDesktop =
-    device.environment === Environment.Desktop ||
-    (matchMedia(MediaQueryBreakpoints.md).matches && matchMedia(MediaQueryBreakpoints.pointerFine))
-
-  const setupViewportHeightListeners = () => {
-    if (!isDesktop) {
-      setViewportHeightWithFallback()
-      window.addEventListener('orientationchange', setViewportHeightWithFallback)
-      window.addEventListener('resize', setViewportHeightWithFallback)
-    }
-  }
-
-  const removeViewportHeightListeners = () => {
-    if (!isDesktop) {
-      window.removeEventListener('orientationchange', setViewportHeightWithFallback)
-      window.removeEventListener('resize', setViewportHeightWithFallback)
-    }
-  }
-
   const onDestroy = () => {
-    removeViewportHeightListeners()
     const rootElement = document.getElementById(ElementIds.RootId) as HTMLElement
     root.unmount()
     rootElement.remove()
@@ -84,13 +62,12 @@ const startApplication: StartApplication = async function startApplication(
   const renderApp = () => {
     const rootElement = document.createElement('div')
     rootElement.id = ElementIds.RootId
+    rootElement.className = 'h-full'
     const appendedRootNode = document.body.appendChild(rootElement)
     root = createRoot(appendedRootNode)
 
     disableIosTextFieldZoom()
 
-    setupViewportHeightListeners()
-
     setDefaultMonospaceFont(device.platform)
 
     root.render(

packages/web/src/javascripts/Application/Application.ts

@@ -38,7 +38,7 @@ import {
 import { MobileWebReceiver, NativeMobileEventListener } from '../NativeMobileWeb/MobileWebReceiver'
 import { AndroidBackHandler } from '@/NativeMobileWeb/AndroidBackHandler'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
-import { setCustomViewportHeight, setViewportHeightWithFallback } from '@/setViewportHeightWithFallback'
+import { setCustomViewportHeight } from '@/setViewportHeightWithFallback'
 import { WebServices } from './WebServices'
 
 export type WebEventObserver = (event: WebAppEvent, data?: unknown) => void
@@ -258,7 +258,7 @@ export class WebApplication extends SNApplication implements WebApplicationInter
   }
 
   async handleMobileGainingFocusEvent(): Promise<void> {
-    setViewportHeightWithFallback()
+    /** Optional override */
   }
 
   handleInitialMobileScreenshotPrivacy(): void {
@@ -285,8 +285,6 @@ export class WebApplication extends SNApplication implements WebApplicationInter
     if (this.protections.getMobileScreenshotPrivacyEnabled()) {
       this.mobileDevice().hideMobileInterfaceFromScreenshots()
     }
-
-    setViewportHeightWithFallback()
   }
 
   handleMobileColorSchemeChangeEvent() {
@@ -294,7 +292,7 @@ export class WebApplication extends SNApplication implements WebApplicationInter
   }
 
   handleMobileKeyboardWillChangeFrameEvent(frame: { height: number; contentHeight: number }): void {
-    setCustomViewportHeight(String(frame.contentHeight), 'px', true)
+    setCustomViewportHeight(frame.contentHeight, 'px', true)
     this.notifyWebEvent(WebAppEvent.MobileKeyboardWillChangeFrame, frame)
   }
 

packages/web/src/javascripts/Components/ApplicationGroupView/ApplicationGroupView.tsx

@@ -113,7 +113,11 @@ class ApplicationGroupView extends Component<Props, State> {
     }
 
     return (
-      <div id={this.state.activeApplication.identifier} key={this.state.activeApplication.ephemeralIdentifier}>
+      <div
+        id={this.state.activeApplication.identifier}
+        className={'h-full'}
+        key={this.state.activeApplication.ephemeralIdentifier}
+      >
         <DeallocateHandler application={this.state.activeApplication}>
           <ApplicationView
             key={this.state.activeApplication.ephemeralIdentifier}

packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx

@@ -197,7 +197,7 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
       <DarkModeHandler application={application} />
       <ResponsivePaneProvider paneController={application.getViewControllerManager().paneController}>
         <PremiumModalProvider application={application} viewControllerManager={viewControllerManager}>
-          <div className={platformString + ' main-ui-view sn-component'}>
+          <div className={platformString + ' main-ui-view sn-component h-full'}>
             <div id="app" className="app app-column-container" ref={appColumnContainerRef}>
               <FileDragNDropProvider
                 application={application}

packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx

@@ -247,7 +247,7 @@ const ContentListView: FunctionComponent<Props> = ({
     <div
       id="items-column"
       className={classNames(
-        'sn-component section app-column flex h-screen flex-col overflow-hidden pt-safe-top md:h-full',
+        'sn-component section app-column flex h-full flex-col overflow-hidden pt-safe-top',
         'xl:w-87.5 xsm-only:!w-full sm-only:!w-full',
         isTabletScreenSize && !isNotesListVisibleOnTablets
           ? 'pointer-coarse:md-only:!w-0 pointer-coarse:lg-only:!w-0'

packages/web/src/javascripts/Components/MultipleSelectedFiles/MultipleSelectedFiles.tsx

@@ -26,7 +26,7 @@ const MultipleSelectedFiles = ({ filesController, selectionController }: Props)
           <FileOptionsPanel filesController={filesController} selectionController={selectionController} />
         </div>
       </div>
-      <div className="flex min-h-screen w-full max-w-md flex-grow flex-col items-center justify-center md:min-h-0">
+      <div className="flex min-h-full w-full max-w-md flex-grow flex-col items-center justify-center">
         <IlNotesIcon className="block" />
         <h2 className="m-0 mt-4 text-center text-lg font-bold">{count} selected files</h2>
         <p className="max-w-60 mt-2 text-center text-sm">Actions will be performed on all selected files.</p>

packages/web/src/javascripts/Components/MultipleSelectedNotes/MultipleSelectedNotes.tsx

@@ -51,7 +51,7 @@ const MultipleSelectedNotes = ({
           />
         </div>
       </div>
-      <div className="flex min-h-screen w-full max-w-md flex-grow flex-col items-center justify-center md:min-h-0">
+      <div className="flex min-h-full w-full max-w-md flex-grow flex-col items-center justify-center md:min-h-0">
         <IlNotesIcon className="block" />
         <h2 className="m-0 mt-4 text-center text-lg font-bold">{count} selected notes</h2>
         <p className="max-w-60 mt-2 text-center text-sm">Actions will be performed on all selected notes.</p>

packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx

@@ -98,10 +98,7 @@ class NoteGroupView extends AbstractComponent<Props, State> {
     const canRenderEditorView = this.state.selectedPane === AppPaneId.Editor || !this.state.isInMobileView
 
     return (
-      <div
+      <div id={ElementIds.EditorColumn} className="app-column app-column-third flex h-full flex-col pt-safe-top">
-        id={ElementIds.EditorColumn}
-        className="app-column app-column-third flex min-h-screen flex-col pt-safe-top md:h-full md:min-h-0"
-      >
         <ResponsivePaneContent paneId={AppPaneId.Editor} className="flex-grow">
           {this.state.showMultipleSelectedNotes && (
             <MultipleSelectedNotes

packages/web/src/javascripts/Components/NoteView/NoteView.tsx

@@ -1025,11 +1025,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
     const renderHeaderOptions = isMobileScreen() ? !this.state.plaintextEditorFocused : true
 
     return (
-      <div
+      <div aria-label="Note" className="section editor sn-component h-full md:max-h-full" ref={this.noteViewElementRef}>
-        aria-label="Note"
-        className="section editor sn-component max-h-screen md:max-h-full"
-        ref={this.noteViewElementRef}
-      >
         {this.note && (
           <NoteViewFileDropTarget
             note={this.note}

packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx

@@ -58,7 +58,7 @@ const PositionedPopoverContent = ({
     if (popoverElement) {
       setTimeout(() => {
         popoverElement.scrollTop = 0
-      })
+      }, 10)
     }
   }, [popoverElement])
 
@@ -70,7 +70,8 @@ const PositionedPopoverContent = ({
     <Portal>
       <div
         className={classNames(
-          'absolute top-0 left-0 flex h-screen w-full min-w-80 cursor-auto flex-col overflow-y-auto rounded bg-default shadow-main md:h-auto md:max-w-xs',
+          'absolute top-0 left-0 flex h-full w-full min-w-80 cursor-auto flex-col',
+          'overflow-y-auto rounded bg-default shadow-main md:h-auto md:max-w-xs',
           overrideZIndex ? overrideZIndex : 'z-dropdown-menu',
           !isDesktopScreen ? 'pt-safe-top pb-safe-bottom' : '',
           !styles && 'md:invisible',

packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx

@@ -57,7 +57,7 @@ const PreferencesView: FunctionComponent<PreferencesProps> = ({
   return (
     <div
       className={classNames(
-        'absolute top-0 left-0 z-preferences flex h-screen max-h-screen w-full flex-col bg-default pt-safe-top md:h-full md:max-h-full',
+        'absolute top-0 left-0 z-preferences flex h-full w-full flex-col bg-default pt-safe-top',
         isIOS() ? 'pb-safe-bottom' : 'pb-2 md:pb-0',
       )}
       style={{

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx

@@ -1,4 +1,5 @@
 import { getPlatformString } from '@/Utils'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 import { DialogOverlay, DialogContent } from '@reach/dialog'
 import { ReactNode } from 'react'
 
@@ -16,7 +17,10 @@ const HistoryModalDialog = ({ children, onDismiss }: Props) => {
     >
       <DialogContent
         aria-label="Note revision history"
-        className="my-0 flex h-screen w-full flex-col rounded-md bg-[color:var(--modal-background-color)] p-0 pt-safe-top pb-safe-bottom shadow-lg md:max-h-[90%] md:w-[90%] md:max-w-[90%]"
+        className={classNames(
+          'my-0 flex h-full w-full flex-col rounded-md bg-[color:var(--modal-background-color)]',
+          'p-0 pt-safe-top pb-safe-bottom shadow-lg md:max-h-[90%] md:w-[90%] md:max-w-[90%]',
+        )}
       >
         <div className="flex h-full flex-col overflow-hidden bg-default">{children}</div>
       </DialogContent>

packages/web/src/javascripts/Components/Tags/Navigation.tsx

@@ -10,7 +10,6 @@ import ResponsivePaneContent from '@/Components/ResponsivePane/ResponsivePaneCon
 import { AppPaneId } from '@/Components/ResponsivePane/AppPaneMetadata'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
-import { isIOS } from '@/Utils'
 import UpgradeNow from '../Footer/UpgradeNow'
 import RoundIconButton from '../Button/RoundIconButton'
 
@@ -54,16 +53,70 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
     [application],
   )
 
+  const NavigationFooter = useMemo(() => {
+    return (
+      <div
+        className={classNames(
+          'fixed bottom-0 flex min-h-[50px] w-full w-full items-center border-t border-border bg-contrast',
+          'px-3.5 pb-safe-bottom pt-2.5 md:hidden',
+        )}
+      >
+        <RoundIconButton
+          className="mr-auto bg-default"
+          onClick={() => {
+            toggleAppPane(AppPaneId.Items)
+          }}
+          label="Go to items list"
+          icon="chevron-left"
+        />
+        <UpgradeNow application={application} featuresController={viewControllerManager.featuresController} />
+        <RoundIconButton
+          className="ml-2.5 bg-default"
+          onClick={() => {
+            viewControllerManager.accountMenuController.toggleShow()
+          }}
+          label="Go to account menu"
+          icon="account-circle"
+        />
+        {hasPasscode && (
+          <RoundIconButton
+            id="lock-item"
+            onClick={() => application.lock()}
+            label="Locks application and wipes unencrypted data from memory."
+            className="ml-2.5 bg-default"
+            icon="lock-filled"
+          />
+        )}
+        <RoundIconButton
+          className="ml-2.5 bg-default"
+          onClick={() => {
+            viewControllerManager.preferencesController.openPreferences()
+          }}
+          label="Go to preferences"
+          icon="tune"
+        />
+        <RoundIconButton
+          className="ml-2.5 bg-default"
+          onClick={() => {
+            viewControllerManager.quickSettingsMenuController.toggle()
+          }}
+          label="Go to quick settings menu"
+          icon="themes"
+        />
+      </div>
+    )
+  }, [hasPasscode, application, viewControllerManager, toggleAppPane])
+
   return (
     <div
       id="navigation"
       className={classNames(
-        'sn-component section app-column h-screen max-h-screen overflow-hidden pt-safe-top md:h-full md:max-h-full md:min-h-0 md:pb-0',
+        'pb-[50px] md:pb-0',
+        'sn-component section app-column h-full max-h-full overflow-hidden pt-safe-top md:h-full md:max-h-full md:min-h-0',
         'w-[220px] xl:w-[220px] xsm-only:!w-full sm-only:!w-full',
         selectedPane === AppPaneId.Navigation
           ? 'pointer-coarse:md-only:!w-48 pointer-coarse:lg-only:!w-48'
           : 'pointer-coarse:md-only:!w-0 pointer-coarse:lg-only:!w-0',
-        isIOS() ? 'pb-safe-bottom' : 'pb-2.5',
       )}
       ref={(element) => {
         if (element) {
@@ -88,50 +141,7 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
           <SmartViewsSection viewControllerManager={viewControllerManager} />
           <TagsSection viewControllerManager={viewControllerManager} />
         </div>
-        <div className="flex items-center border-t border-border px-3.5 pt-2.5 md:hidden">
+        {NavigationFooter}
-          <RoundIconButton
-            className="mr-auto bg-default"
-            onClick={() => {
-              toggleAppPane(AppPaneId.Items)
-            }}
-            label="Go to items list"
-            icon="chevron-left"
-          />
-          <UpgradeNow application={application} featuresController={viewControllerManager.featuresController} />
-          <RoundIconButton
-            className="ml-2.5 bg-default"
-            onClick={() => {
-              viewControllerManager.accountMenuController.toggleShow()
-            }}
-            label="Go to account menu"
-            icon="account-circle"
-          />
-          {hasPasscode && (
-            <RoundIconButton
-              id="lock-item"
-              onClick={() => application.lock()}
-              label="Locks application and wipes unencrypted data from memory."
-              className="ml-2.5 bg-default"
-              icon="lock-filled"
-            />
-          )}
-          <RoundIconButton
-            className="ml-2.5 bg-default"
-            onClick={() => {
-              viewControllerManager.preferencesController.openPreferences()
-            }}
-            label="Go to preferences"
-            icon="tune"
-          />
-          <RoundIconButton
-            className="ml-2.5 bg-default"
-            onClick={() => {
-              viewControllerManager.quickSettingsMenuController.toggle()
-            }}
-            label="Go to quick settings menu"
-            icon="themes"
-          />
-        </div>
       </ResponsivePaneContent>
       {panelElement && (
         <PanelResizer

packages/web/src/javascripts/setViewportHeightWithFallback.tsx

@@ -1,25 +1,14 @@
 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) => {
+export const setCustomViewportHeight = (height: number, suffix: 'px' | 'vh', forceTriggerResizeEvent = false) => {
-  log(LoggingDomain.Viewport, `setCustomViewportHeight: ${height}`)
+  const value = `${height}${suffix}`
 
-  document.documentElement.style.setProperty(ViewportHeightKey, `${height}${suffix}`)
+  log(LoggingDomain.Viewport, `setCustomViewportHeight: ${value}`)
+
+  document.body.style.height = value
 
   if (forceTriggerResizeEvent) {
     window.dispatchEvent(new Event('resize'))

packages/web/src/stylesheets/_main.scss

@@ -121,7 +121,7 @@ p {
 html,
 body,
 .main-ui-view {
-  height: max-content;
+  height: 100%;
   min-height: 0;
   max-height: none;
 
@@ -139,8 +139,6 @@ body,
   background-color: var(--editor-header-bar-background-color);
 }
 
-$footer-height: 2rem;
-
 #resizer-overlay {
   position: absolute;
   width: 100%;
@@ -157,10 +155,6 @@ $footer-height: 2rem;
   vertical-align: top;
   width: 100%;
 
-  @media screen and (min-width: 768px) {
-    height: calc(var(--viewport-height, 100vh) - #{$footer-height});
-  }
-
   .section {
     position: relative;
     overflow: hidden;

packages/web/src/stylesheets/_modals.scss

@@ -45,7 +45,7 @@
   bottom: 0;
   z-index: var(--z-index-modal);
   width: 100%;
-  height: var(--viewport-height, 100vh);
+  height: 100vh;
 
   padding-left: 1rem;
   padding-right: 1rem;

packages/web/tailwind.config.js

@@ -53,17 +53,12 @@ module.exports = {
         89: '22.25rem',
         125: '31.25rem',
       },
-      height: {
-        screen: 'var(--viewport-height, 100vh)',
-      },
       minHeight: {
         1: '0.25rem',
         2: '0.5rem',
-        screen: 'var(--viewport-height, 100vh)',
       },
       maxHeight: {
         110: '27.5rem',
-        screen: 'var(--viewport-height, 100vh)',
       },
       zIndex: {
         'editor-content': 'var(--z-index-editor-content)',