From 8e878cd9c44f5072de46a50b593cf2dfdd341a15 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 4 Jun 2026 10:11:21 -0500
Subject: [PATCH] apply safe area insets to mobile layout in PWA mode using
 viewport-fit=cover

---
 web/index.html                              |  2 +-
 web/src/App.tsx                             |  4 +++-
 web/src/components/mobile/MobilePage.tsx    |  7 ++++---
 web/src/components/navigation/Bottombar.tsx | 12 ++++++------
 web/src/components/ui/drawer.tsx            |  7 ++-----
 5 files changed, 16 insertions(+), 16 deletions(-)
diff --git a/web/index.html b/web/index.html
index be6b302f5c..bb019d4263 100644
--- a/web/index.html
+++ b/web/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/images/branding/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
     <title>Frigate</title>
     <link
       rel="apple-touch-icon"
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 01c415de47..550bc36c81 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -78,7 +78,9 @@ function DefaultAppView() {
         className={cn(
           "absolute right-0 top-0 overflow-hidden",
           isMobile
-            ? `bottom-${isPWA ? 16 : 12} left-0 md:bottom-16 landscape:bottom-14 landscape:md:bottom-16`
+            ? isPWA
+              ? "bottom-[calc(3rem+env(safe-area-inset-bottom))] left-0 pt-[env(safe-area-inset-top)] md:bottom-[calc(4rem+env(safe-area-inset-bottom))] landscape:pl-[env(safe-area-inset-left)] landscape:pr-[env(safe-area-inset-right)]"
+              : "bottom-12 left-0 md:bottom-16"
             : "bottom-8 left-[52px]",
         )}
       >
diff --git a/web/src/components/mobile/MobilePage.tsx b/web/src/components/mobile/MobilePage.tsx
index ee56468cb2..b445a9f036 100644
--- a/web/src/components/mobile/MobilePage.tsx
+++ b/web/src/components/mobile/MobilePage.tsx
@@ -146,9 +146,10 @@ export function MobilePageContent({
         <motion.div
           ref={containerRef}
           className={cn(
-            "fixed inset-0 z-50 mb-12 bg-background",
-            isPWA && "mb-16",
-            "landscape:mb-14 landscape:md:mb-16",
+            "fixed inset-0 z-50 bg-background",
+            isPWA
+              ? "mb-[calc(3rem+env(safe-area-inset-bottom))] md:mb-[calc(4rem+env(safe-area-inset-bottom))]"
+              : "mb-12 md:mb-16",
             className,
           )}
           initial={{ x: "100%" }}
diff --git a/web/src/components/navigation/Bottombar.tsx b/web/src/components/navigation/Bottombar.tsx
index 0c344363bf..c0169bf3e7 100644
--- a/web/src/components/navigation/Bottombar.tsx
+++ b/web/src/components/navigation/Bottombar.tsx
@@ -14,7 +14,7 @@ import {
 } from "@/context/statusbar-provider";
 import { Link } from "react-router-dom";
 import { cn } from "@/lib/utils";
-import { isIOS, isMobile } from "react-device-detect";
+import { isMobile } from "react-device-detect";
 import { isPWA } from "@/utils/isPWA";
 import { useTranslation } from "react-i18next";
 
@@ -24,11 +24,11 @@ function Bottombar() {
   return (
     <div
       className={cn(
-        "absolute inset-x-4 bottom-0 flex h-16 flex-row justify-between",
-        isPWA && isIOS
-          ? "portrait:items-start portrait:pt-1 landscape:items-center"
-          : "items-center",
-        isMobile && !isPWA && "h-12 md:h-16",
+        "absolute inset-x-4 bottom-0 flex h-16 flex-row items-center justify-between",
+        isMobile &&
+          (isPWA
+            ? "h-[calc(3rem+env(safe-area-inset-bottom))] pb-[env(safe-area-inset-bottom)] md:h-[calc(4rem+env(safe-area-inset-bottom))]"
+            : "h-12 md:h-16 md:pb-2"),
       )}
     >
       {navItems.map((item) => (
diff --git a/web/src/components/ui/drawer.tsx b/web/src/components/ui/drawer.tsx
index 220708e7e2..af73e93e9d 100644
--- a/web/src/components/ui/drawer.tsx
+++ b/web/src/components/ui/drawer.tsx
@@ -2,8 +2,6 @@ import * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 
 import { cn } from "@/lib/utils";
-import { isPWA } from "@/utils/isPWA";
-import { isIOS } from "react-device-detect";
 
 const Drawer = ({
   shouldScaleBackground = true,
@@ -43,10 +41,9 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-b-0 bg-background",
         className,
-        isIOS && isPWA && "pb-5",
-        isIOS && !isPWA && "md:pb-5",
+        "pb-[calc(0.25rem+env(safe-area-inset-bottom))]",
       )}
       {...props}
     >
