diff --git a/packages/mobile/html/Web.bundle/src/index.html b/packages/mobile/html/Web.bundle/src/index.html
index a149179bb..68d687198 100644
--- a/packages/mobile/html/Web.bundle/src/index.html
+++ b/packages/mobile/html/Web.bundle/src/index.html
@@ -4,7 +4,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="stylesheet" href="web-src/app.css" />
     <script>
         window.defaultSyncServer = "https://api.standardnotes.com";
diff --git a/packages/mobile/src/MobileWebAppContainer.tsx b/packages/mobile/src/MobileWebAppContainer.tsx
index 6e497a002..85d5c5d07 100644
--- a/packages/mobile/src/MobileWebAppContainer.tsx
+++ b/packages/mobile/src/MobileWebAppContainer.tsx
@@ -1,20 +1,13 @@
 import { MobileDevice, MobileDeviceEvent } from '@Lib/Interface'
 import { IsDev } from '@Lib/Utils'
 import { ReactNativeToWebEvent } from '@standardnotes/snjs'
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import { Platform, SafeAreaView } from 'react-native'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Platform } from 'react-native'
 import { WebView, WebViewMessageEvent } from 'react-native-webview'
-import { ThemeContext } from 'styled-components'
-import styled from 'styled-components/native'
 import { AppStateObserverService } from './AppStateObserverService'
 
 const LoggingEnabled = IsDev
 
-const StyledSafeAreaView = styled(SafeAreaView)`
-  flex: 1;
-  ${(props) => `background-color: ${props.theme.stylekitBackgroundColor}`}
-`
-
 export const MobileWebAppContainer = () => {
   const [identifier, setIdentifier] = useState(Math.random())
 
@@ -26,7 +19,6 @@ export const MobileWebAppContainer = () => {
 }
 
 const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => void }) => {
-  const theme = useContext(ThemeContext)
   const webViewRef = useRef<WebView>(null)
   const sourceUri = (Platform.OS === 'android' ? 'file:///android_asset/' : '') + 'Web.bundle/src/index.html'
   const stateService = useMemo(() => new AppStateObserverService(), [])
@@ -180,20 +172,18 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
 
   /* eslint-disable @typescript-eslint/no-empty-function */
   return (
-    <StyledSafeAreaView theme={theme}>
-      <WebView
-        ref={webViewRef}
-        source={{ uri: sourceUri }}
-        originWhitelist={['*']}
-        onLoad={() => {}}
-        onError={(err) => console.error('An error has occurred', err)}
-        onHttpError={() => console.error('An HTTP error occurred')}
-        onMessage={onMessage}
-        allowFileAccess={true}
-        allowUniversalAccessFromFileURLs={true}
-        injectedJavaScriptBeforeContentLoaded={injectedJS}
-      />
-    </StyledSafeAreaView>
+    <WebView
+      ref={webViewRef}
+      source={{ uri: sourceUri }}
+      originWhitelist={['*']}
+      onLoad={() => {}}
+      onError={(err) => console.error('An error has occurred', err)}
+      onHttpError={() => console.error('An HTTP error occurred')}
+      onMessage={onMessage}
+      allowFileAccess={true}
+      allowUniversalAccessFromFileURLs={true}
+      injectedJavaScriptBeforeContentLoaded={injectedJS}
+    />
   )
   /* eslint-enable @typescript-eslint/no-empty-function */
 }
diff --git a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
index e262971ad..79b9df311 100644
--- a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
+++ b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
@@ -57,9 +57,8 @@ const PositionedPopoverContent = ({
     <Portal>
       <div
         className={classNames(
-          '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',
+          'safe-area-padding 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',
-          className,
         )}
         style={{
           ...styles,
@@ -71,15 +70,17 @@ const PositionedPopoverContent = ({
         }}
         data-popover={id}
       >
-        <div className="md:hidden">
-          <div className="flex items-center justify-end px-3">
-            <button className="rounded-full border border-border p-1" onClick={togglePopover}>
-              <Icon type="close" className="h-4 w-4" />
-            </button>
+        <div className={className}>
+          <div className="md:hidden">
+            <div className="flex items-center justify-end px-3">
+              <button className="rounded-full border border-border p-1" onClick={togglePopover}>
+                <Icon type="close" className="h-4 w-4" />
+              </button>
+            </div>
+            <HorizontalSeparator classes="my-2" />
           </div>
-          <HorizontalSeparator classes="my-2" />
+          {children}
         </div>
-        {children}
       </div>
     </Portal>
   )
diff --git a/packages/web/src/stylesheets/_main.scss b/packages/web/src/stylesheets/_main.scss
index 1e4018bda..9cb7cf6a0 100644
--- a/packages/web/src/stylesheets/_main.scss
+++ b/packages/web/src/stylesheets/_main.scss
@@ -23,6 +23,15 @@
   --sn-stylekit-editor-font-family: var(--sn-stylekit-sans-serif-font);
 
   --reach-checkbox: 1;
+
+  --safe-area-inset-top: env(safe-area-inset-top, 0);
+  --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 {
@@ -31,9 +40,16 @@ html {
 
 body {
   font-size: var(--sn-stylekit-base-font-size);
+  background-color: var(--sn-stylekit-background-color);
   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);
+}
+
 html,
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
diff --git a/packages/web/tailwind.config.js b/packages/web/tailwind.config.js
index c33a6e02c..082ad7b40 100644
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -43,16 +43,16 @@ module.exports = {
         125: '31.25rem',
       },
       height: {
-        screen: 'var(--viewport-height)',
+        screen: 'var(--safe-viewport-height)',
       },
       minHeight: {
         1: '0.25rem',
         2: '0.5rem',
-        screen: 'var(--viewport-height)',
+        screen: 'var(--safe-viewport-height)',
       },
       maxHeight: {
         110: '27.5rem',
-        screen: 'var(--viewport-height)',
+        screen: 'var(--safe-viewport-height)',
       },
       zIndex: {
         'editor-content': 'var(--z-index-editor-content)',
