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

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
-        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"
-      >
+      <div id={ElementIds.EditorColumn} className="app-column app-column-third flex h-full flex-col pt-safe-top">
         <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
-        aria-label="Note"
-        className="section editor sn-component max-h-screen md:max-h-full"
-        ref={this.noteViewElementRef}
-      >
+      <div aria-label="Note" className="section editor sn-component h-full 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">
-          <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>
+        {NavigationFooter}
       </ResponsivePaneContent>
       {panelElement && (
         <PanelResizer