diff --git a/packages/ui/src/silkhq/SheetWithDepth.tsx b/packages/ui/src/silkhq/SheetWithDepth.tsx
index fb4ee9c828..6e447f57c7 100644
--- a/packages/ui/src/silkhq/SheetWithDepth.tsx
+++ b/packages/ui/src/silkhq/SheetWithDepth.tsx
@@ -103,7 +103,9 @@ SheetWithDepthStackRoot.displayName = 'SheetWithDepthStack.Root'
 // The SheetStack outlets that define the scenery of the stack
 // (i.e. the content underneath) for the depth effect.
 
-const initialTopOffset = 'max(env(safe-area-inset-top), 1.3vh)'
+const isIOS = window.navigator.userAgent?.match(/iPhone|iPad/i)
+const initialTopOffset = isIOS ?
+  'max(env(safe-area-inset-top), 1.3vh)' : 'max(var(--safe-area-inset-top), 1.3vh)'
 
 const SheetWithDepthStackSceneryOutlets = React.forwardRef<
   React.ElementRef<typeof SheetStack.Outlet>,
diff --git a/src/main/mobile/components/app.css b/src/main/mobile/components/app.css
index 9e97565377..9cd1d5697c 100644
--- a/src/main/mobile/components/app.css
+++ b/src/main/mobile/components/app.css
@@ -38,6 +38,10 @@ html.is-native-android {
       padding-top: calc(var(--safe-area-inset-top) + 14px);
     }
   }
+
+  .SheetWithDepth-content {
+    height: calc(100% - max(calc(var(--safe-area-inset-top) + 1.3vh), 2.6vh));
+  }
 }
 
 #main-container {