From 6f39b5b85cd178530ee6230bec603c34f1e68374 Mon Sep 17 00:00:00 2001
From: KyleTryon <git@techsquidtv.com>
Date: Sat, 12 Sep 2026 19:50:50 -0400
Subject: [PATCH] fix(frontend): respect PWA safe areas

---
 apps/frontend/src/App.tsx                         |  2 +-
 .../src/components/AuthCompleteScreen.tsx         |  2 +-
 .../src/components/DashboardMobileMenu.tsx        |  2 +-
 apps/frontend/src/components/DashboardScreen.tsx  |  2 +-
 .../src/components/editor/EditorScreen.tsx        |  4 ++--
 .../provider-connect/ProviderConnectScreen.tsx    |  2 +-
 apps/frontend/src/components/ui/dialog.tsx        |  2 +-
 apps/frontend/src/components/ui/drawer.tsx        |  2 +-
 apps/frontend/src/index.css                       | 15 +++++++++++++++
 apps/frontend/src/routes/_app.edit.$sessionId.tsx |  4 ++--
 .../frontend/src/routes/local.edit.$sessionId.tsx |  4 ++--
 11 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/apps/frontend/src/App.tsx b/apps/frontend/src/App.tsx
index f630b8a7..173020cc 100644
--- a/apps/frontend/src/App.tsx
+++ b/apps/frontend/src/App.tsx
@@ -67,7 +67,7 @@ export default function App() {
 
   if (loading) {
     return (
-      <div className="flex min-h-screen flex-col items-center justify-center gap-6 bg-background text-foreground">
+      <div className="flex min-h-(--app-viewport-height) flex-col items-center justify-center gap-6 bg-background text-foreground">
         <div className="relative">
           <img
             src="/logo-light.svg"
diff --git a/apps/frontend/src/components/AuthCompleteScreen.tsx b/apps/frontend/src/components/AuthCompleteScreen.tsx
index ab4cd6ba..11f8aa2c 100644
--- a/apps/frontend/src/components/AuthCompleteScreen.tsx
+++ b/apps/frontend/src/components/AuthCompleteScreen.tsx
@@ -12,7 +12,7 @@ export default function AuthCompleteScreen() {
   }, []);
 
   return (
-    <div className="min-h-screen bg-background text-foreground flex items-center justify-center p-4">
+    <div className="min-h-(--app-viewport-height) bg-background text-foreground flex items-center justify-center p-4">
       <div className="bg-card text-card-foreground border border-border p-8 rounded-lg w-full max-w-md shadow-2xl text-center">
         <div className="flex items-center justify-center mb-6">
           <img
diff --git a/apps/frontend/src/components/DashboardMobileMenu.tsx b/apps/frontend/src/components/DashboardMobileMenu.tsx
index e924ca56..f71c779f 100644
--- a/apps/frontend/src/components/DashboardMobileMenu.tsx
+++ b/apps/frontend/src/components/DashboardMobileMenu.tsx
@@ -53,7 +53,7 @@ export function DashboardMobileMenu({
           <Menu className="h-5 w-5" />
         </button>
       </DrawerTrigger>
-      <DrawerContent className="border-border bg-background/95 pb-[max(1rem,env(safe-area-inset-bottom))] sm:hidden">
+      <DrawerContent className="border-border bg-background/95 [--drawer-bottom-padding:1rem] sm:hidden">
         <DrawerTitle className="sr-only">Cliparr Menu</DrawerTitle>
         <DrawerDescription className="sr-only">
           Dashboard menu
diff --git a/apps/frontend/src/components/DashboardScreen.tsx b/apps/frontend/src/components/DashboardScreen.tsx
index 7090cd99..e6d297bb 100644
--- a/apps/frontend/src/components/DashboardScreen.tsx
+++ b/apps/frontend/src/components/DashboardScreen.tsx
@@ -768,7 +768,7 @@ export default function DashboardScreen({
     ) : null;
 
   return (
-    <div className="min-h-screen bg-background p-4 text-foreground sm:p-8">
+    <div className="min-h-(--app-viewport-height) bg-background p-4 text-foreground sm:p-8">
       <div className="max-w-5xl mx-auto">
         <header className="mb-5 space-y-4 sm:mb-12 sm:flex sm:items-center sm:justify-between sm:space-y-0">
           <div className="flex items-start justify-between gap-3">
diff --git a/apps/frontend/src/components/editor/EditorScreen.tsx b/apps/frontend/src/components/editor/EditorScreen.tsx
index f82e1e6c..132272b8 100644
--- a/apps/frontend/src/components/editor/EditorScreen.tsx
+++ b/apps/frontend/src/components/editor/EditorScreen.tsx
@@ -644,7 +644,7 @@ function EditorScreenContent({
 
   if (!exportSource.source) {
     return (
-      <div className="flex h-dvh items-center justify-center overflow-hidden bg-background p-8 text-foreground">
+      <div className="flex h-(--app-viewport-height) items-center justify-center overflow-hidden bg-background p-8 text-foreground">
         <div className="text-center">
           <p className="text-destructive mb-4">No exportable stream found.</p>
           <button onClick={onBack} className="text-primary hover:underline">
@@ -656,7 +656,7 @@ function EditorScreenContent({
   }
 
   return (
-    <div className="flex h-dvh flex-col overflow-hidden bg-editor-workspace text-foreground">
+    <div className="flex h-(--app-viewport-height) flex-col overflow-hidden bg-editor-workspace text-foreground">
       <ConfirmationDialog
         open={subtitleTrackChangePending}
         title="Replace subtitle cues?"
diff --git a/apps/frontend/src/components/provider-connect/ProviderConnectScreen.tsx b/apps/frontend/src/components/provider-connect/ProviderConnectScreen.tsx
index b076a2a6..53f23580 100644
--- a/apps/frontend/src/components/provider-connect/ProviderConnectScreen.tsx
+++ b/apps/frontend/src/components/provider-connect/ProviderConnectScreen.tsx
@@ -13,7 +13,7 @@ export default function ProviderConnectScreen({
   onOpenLocalVideo,
 }: Properties) {
   return (
-    <div className="flex min-h-screen items-start justify-center bg-background text-foreground sm:p-4 sm:pt-12">
+    <div className="flex min-h-(--app-viewport-height) items-start justify-center bg-background text-foreground sm:p-4 sm:pt-12">
       <div className="relative w-full max-w-2xl overflow-hidden text-card-foreground sm:rounded-4xl sm:border sm:border-border sm:bg-card sm:shadow-2xl">
         <div className="pointer-events-none absolute inset-0">
           <div className="absolute inset-x-0 top-0 h-40 bg-linear-to-b from-primary/10 via-secondary/5 to-transparent" />
diff --git a/apps/frontend/src/components/ui/dialog.tsx b/apps/frontend/src/components/ui/dialog.tsx
index 803e26ca..a7caaf6a 100644
--- a/apps/frontend/src/components/ui/dialog.tsx
+++ b/apps/frontend/src/components/ui/dialog.tsx
@@ -146,7 +146,7 @@ function DialogPortal({
   const content = (
     <div
       className={cn(
-        "pointer-events-none fixed inset-0 z-50 grid place-items-center p-4",
+        "pointer-events-none fixed top-(--safe-area-top) right-(--safe-area-right) bottom-(--safe-area-bottom) left-(--safe-area-left) z-50 grid place-items-center p-4",
         className,
       )}
     >
diff --git a/apps/frontend/src/components/ui/drawer.tsx b/apps/frontend/src/components/ui/drawer.tsx
index cfad3c4a..4b7c99df 100644
--- a/apps/frontend/src/components/ui/drawer.tsx
+++ b/apps/frontend/src/components/ui/drawer.tsx
@@ -44,7 +44,7 @@ const DrawerContent = React.forwardRef<
       <DrawerPrimitive.Content
         ref={ref}
         className={cn(
-          "fixed inset-x-0 bottom-0 z-50 mt-24 flex max-h-[85dvh] flex-col rounded-t-2xl border border-border bg-card text-card-foreground shadow-2xl outline-none",
+          "fixed right-(--safe-area-right) bottom-0 left-(--safe-area-left) z-50 flex max-h-[min(85dvh,calc(100dvh-var(--safe-area-top)-6rem))] flex-col overflow-y-auto rounded-t-2xl border border-border bg-card pb-[max(var(--drawer-bottom-padding,0px),var(--safe-area-bottom))] text-card-foreground shadow-2xl outline-none",
           className,
         )}
         {...props}
diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css
index 423bd3b8..4af7dd79 100644
--- a/apps/frontend/src/index.css
+++ b/apps/frontend/src/index.css
@@ -5,6 +5,13 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
+  --safe-area-top: env(safe-area-inset-top);
+  --safe-area-right: env(safe-area-inset-right);
+  --safe-area-bottom: env(safe-area-inset-bottom);
+  --safe-area-left: env(safe-area-inset-left);
+  --app-viewport-height: calc(
+    100dvh - var(--safe-area-top) - var(--safe-area-bottom)
+  );
   --background: oklch(0.9851 0 0);
   --foreground: oklch(0.1591 0 0);
   --card: oklch(0.9461 0 0);
@@ -511,6 +518,14 @@
     background-clip: padding-box;
   }
 
+  /* The app owns safe-area padding; route screens use the remaining height. */
+  #root {
+    box-sizing: border-box;
+    min-height: 100dvh;
+    padding: var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom)
+      var(--safe-area-left);
+  }
+
   body {
     @apply bg-background text-foreground;
     letter-spacing: var(--tracking-normal);
diff --git a/apps/frontend/src/routes/_app.edit.$sessionId.tsx b/apps/frontend/src/routes/_app.edit.$sessionId.tsx
index 181e9370..db0a3036 100644
--- a/apps/frontend/src/routes/_app.edit.$sessionId.tsx
+++ b/apps/frontend/src/routes/_app.edit.$sessionId.tsx
@@ -85,7 +85,7 @@ function EditorRouteComponent() {
 
   if (loading) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-background text-foreground">
+      <div className="flex min-h-(--app-viewport-height) items-center justify-center bg-background text-foreground">
         <BarsLoader label="Loading editor…" showLabel />
       </div>
     );
@@ -93,7 +93,7 @@ function EditorRouteComponent() {
 
   if (error) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-background px-6 text-foreground">
+      <div className="flex min-h-(--app-viewport-height) items-center justify-center bg-background px-6 text-foreground">
         <div className="max-w-md space-y-4 text-center">
           <p className="text-sm text-destructive">{error}</p>
           <div className="flex flex-wrap items-center justify-center gap-3">
diff --git a/apps/frontend/src/routes/local.edit.$sessionId.tsx b/apps/frontend/src/routes/local.edit.$sessionId.tsx
index 4e8bdd76..5d882487 100644
--- a/apps/frontend/src/routes/local.edit.$sessionId.tsx
+++ b/apps/frontend/src/routes/local.edit.$sessionId.tsx
@@ -56,7 +56,7 @@ function LocalEditorRouteComponent() {
 
   if (loading) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-background text-foreground">
+      <div className="flex min-h-(--app-viewport-height) items-center justify-center bg-background text-foreground">
         <BarsLoader label="Loading local video…" showLabel />
       </div>
     );
@@ -71,7 +71,7 @@ function LocalEditorRouteComponent() {
   const needsPermission = resolution?.status === "permission-needed";
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background p-6 text-foreground">
+    <div className="flex min-h-(--app-viewport-height) items-center justify-center bg-background p-6 text-foreground">
       <div className="w-full max-w-md rounded-lg border border-border bg-card p-5 text-card-foreground shadow-lg">
         <div className="mb-4 flex h-11 w-11 items-center justify-center rounded-full border border-border bg-background text-muted-foreground">
           {needsPermission ? (