diff --git a/packages/web/src/index.html b/packages/web/src/index.html
index 6ea8bb1e8..68d6421b6 100644
--- a/packages/web/src/index.html
+++ b/packages/web/src/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8"/>
     <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
-    <meta content="width=device-width, initial-scale=1" name="viewport"/>
+    <meta content="viewport-fit=cover, width=device-width, initial-scale=1" name="viewport"/>
 
     <link rel="canonical" href="https://app.standardnotes.com" />
 
diff --git a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
index 9c9ec6834..8217b0f25 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
@@ -185,13 +185,13 @@ const ContentListView: FunctionComponent<Props> = ({
     <div
       id="items-column"
       className={classNames(
-        'sn-component section app-column flex h-screen flex-col md:h-full',
+        'sn-component section app-column flex h-screen flex-col pt-safe-top md:h-full',
         'xl:w-87.5 xsm-only:!w-full sm-only:!w-full pointer-coarse:md-only:!w-52 pointer-coarse:lg-only:!w-52',
       )}
       aria-label={'Notes & Files'}
       ref={itemsViewPanelRef}
     >
-      <ResponsivePaneContent paneId={AppPaneId.Items} className="min-h-[85vh]">
+      <ResponsivePaneContent paneId={AppPaneId.Items}>
         <div id="items-title-bar" className="section-title-bar border-b border-solid border-border">
           <div id="items-title-bar-container">
             <input
diff --git a/packages/web/src/javascripts/Components/Navigation/Navigation.tsx b/packages/web/src/javascripts/Components/Navigation/Navigation.tsx
index da89a683f..5c04c6d0b 100644
--- a/packages/web/src/javascripts/Components/Navigation/Navigation.tsx
+++ b/packages/web/src/javascripts/Components/Navigation/Navigation.tsx
@@ -11,6 +11,7 @@ import { AppPaneId } from '@/Components/ResponsivePane/AppPaneMetadata'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 import Icon from '../Icon/Icon'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
+import { isIOS } from '@/Utils'
 
 type Props = {
   application: WebApplication
@@ -60,7 +61,10 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
   return (
     <div
       id="navigation"
-      className="sn-component section app-column h-screen max-h-screen w-[220px] overflow-hidden pb-8 md:h-full md:min-h-0 md:py-0 xsm-only:!w-full sm-only:!w-full"
+      className={classNames(
+        'sn-component section app-column h-screen max-h-screen w-[220px] overflow-hidden pt-safe-top md:h-full md:min-h-0 md:py-0 xsm-only:!w-full sm-only:!w-full',
+        isIOS() ? 'pb-safe-bottom' : 'pb-2.5',
+      )}
       ref={ref}
     >
       <ResponsivePaneContent paneId={AppPaneId.Navigation} contentElementId="navigation-content">
diff --git a/packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx b/packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx
index c87978f98..ccecffaa3 100644
--- a/packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx
+++ b/packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx
@@ -91,7 +91,7 @@ class NoteGroupView extends PureComponent<Props, State> {
     return (
       <div
         id={ElementIds.EditorColumn}
-        className="app-column app-column-third flex min-h-screen flex-col md:h-full md:min-h-0"
+        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 && (
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx
index 4c71456c4..331a96014 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx
@@ -8,7 +8,9 @@ import { PreferencesProps } from './PreferencesProps'
 const PreferencesCanvas: FunctionComponent<PreferencesProps & { menu: PreferencesMenu }> = (props) => (
   <div className="flex min-h-0 flex-grow flex-col-reverse md:flex-row md:justify-between">
     <PreferencesMenuView menu={props.menu} />
-    <PaneSelector {...props} />
+    <div className="min-h-0 flex-grow overflow-auto bg-contrast">
+      <PaneSelector {...props} />
+    </div>
   </div>
 )
 
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx
index cad631fcb..fc0fe804d 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx
@@ -7,7 +7,7 @@ const PreferencesPane: FunctionComponent<{ children?: ReactNode }> = ({ children
         {children != undefined && Array.isArray(children) ? children.filter((child) => child != undefined) : children}
       </div>
     </div>
-    <div className="flex-shrink basis-[13.75rem]" />
+    <div className="hidden flex-shrink basis-[13.75rem] md:block" />
   </div>
 )
 
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
index 926e8ba68..384826cf6 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
@@ -37,7 +37,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
   )
 
   return (
-    <div className="border-t border-border bg-default px-5 pt-2 pb-6 md:border-0 md:bg-transparent md:px-0 md:py-0">
+    <div className="border-t border-border bg-default px-5 pt-2 md:border-0 md:bg-transparent md:px-0 md:py-0">
       <div className="hidden min-w-55 flex-col overflow-y-auto px-3 py-6 md:flex">
         {menuItems.map((pref) => (
           <PreferencesMenuItem
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
index 54f5cbd77..a612d0ab4 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
@@ -4,8 +4,9 @@ import { observer } from 'mobx-react-lite'
 import { PreferencesMenu } from './PreferencesMenu'
 import PreferencesCanvas from './PreferencesCanvas'
 import { PreferencesProps } from './PreferencesProps'
-import { fitNodeToMobileScreen } from '@/Utils'
+import { fitNodeToMobileScreen, isIOS } from '@/Utils'
 import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 const PreferencesView: FunctionComponent<PreferencesProps> = (props) => {
   const menu = useMemo(
@@ -31,7 +32,10 @@ const PreferencesView: FunctionComponent<PreferencesProps> = (props) => {
 
   return (
     <div
-      className="absolute top-0 left-0 z-preferences flex h-full max-h-screen w-full flex-col bg-contrast"
+      className={classNames(
+        'absolute top-0 left-0 z-preferences flex h-full max-h-screen w-full flex-col bg-default pt-safe-top',
+        isIOS() ? 'pb-safe-bottom' : 'pb-2',
+      )}
       ref={fitNodeToMobileScreen}
     >
       <div className="flex w-full flex-row items-center justify-between border-b border-solid border-border bg-default px-3 py-2 md:p-3">
diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx
index 89ae84ac6..4d300fa8e 100644
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx
@@ -16,7 +16,7 @@ const HistoryModalDialog = ({ children, onDismiss }: Props) => {
     >
       <DialogContent
         aria-label="Note revision history"
-        className="my-0 flex h-full w-full flex-col rounded-md bg-[color:var(--modal-background-color)] p-0 shadow-lg md:max-h-[90%] md:w-[90%] md:max-w-[90%]"
+        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%]"
       >
         <div className="flex h-full flex-col overflow-hidden bg-default">{children}</div>
       </DialogContent>
diff --git a/packages/web/src/stylesheets/_main.scss b/packages/web/src/stylesheets/_main.scss
index 9cb7cf6a0..f276971e5 100644
--- a/packages/web/src/stylesheets/_main.scss
+++ b/packages/web/src/stylesheets/_main.scss
@@ -28,10 +28,6 @@
   --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
   --safe-area-inset-left: env(safe-area-inset-left, 0);
   --safe-area-inset-right: env(safe-area-inset-right, 0);
-
-  --safe-viewport-height: calc(
-    var(--viewport-height) - calc(var(--safe-area-inset-top) + var(--safe-area-inset-bottom))
-  );
 }
 
 html {
@@ -44,7 +40,6 @@ body {
   color: var(--sn-stylekit-foreground-color);
 }
 
-body,
 .safe-area-padding {
   padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom)
     var(--safe-area-inset-left);
diff --git a/packages/web/tailwind.config.js b/packages/web/tailwind.config.js
index f25389ef6..6899a158c 100644
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -15,6 +15,10 @@ module.exports = {
         87.5: '21.875rem',
         125: '31.25rem',
         160: '40rem',
+        'safe-top': 'var(--safe-area-inset-top)',
+        'safe-bottom': 'var(--safe-area-inset-bottom)',
+        'safe-left': 'var(--safe-area-inset-left)',
+        'safe-right': 'var(--safe-area-inset-right)',
       },
       minWidth: {
         1: '0.25rem',
@@ -43,16 +47,16 @@ module.exports = {
         125: '31.25rem',
       },
       height: {
-        screen: 'var(--safe-viewport-height)',
+        screen: 'var(--viewport-height)',
       },
       minHeight: {
         1: '0.25rem',
         2: '0.5rem',
-        screen: 'var(--safe-viewport-height)',
+        screen: 'var(--viewport-height)',
       },
       maxHeight: {
         110: '27.5rem',
-        screen: 'var(--safe-viewport-height)',
+        screen: 'var(--viewport-height)',
       },
       zIndex: {
         'editor-content': 'var(--z-index-editor-content)',
