From 89a2fca7fd75c41ca6e4f27cd41cc85b139ba5e1 Mon Sep 17 00:00:00 2001
From: Ryan Gregg <github@ryangregg.com>
Date: Wed, 4 Feb 2026 21:24:43 -0800
Subject: [PATCH] Adjust how app dispalys as PWA to enable safe areas

---
 frontend/src/App.tsx    |  2 +-
 frontend/src/styles.css | 27 +++++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 591fa07..2fb894d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -758,7 +758,7 @@ export function App() {
   );
 
   return (
-    <div className="flex flex-col h-dvh">
+    <div className="flex flex-col h-full">
       <StatusBar
         health={health}
         config={config}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 87e383c..dbd3f7a 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -12,10 +12,37 @@ body,
   height: 100%;
 }
 
+/* iOS PWA safe-area support */
+:root {
+  --safe-area-top: env(safe-area-inset-top, 0px);
+  --safe-area-right: env(safe-area-inset-right, 0px);
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-area-left: env(safe-area-inset-left, 0px);
+  --safe-area-bottom-capped: min(var(--safe-area-bottom), 12px);
+}
+
+@supports (padding: constant(safe-area-inset-top)) {
+  :root {
+    --safe-area-top: constant(safe-area-inset-top);
+    --safe-area-right: constant(safe-area-inset-right);
+    --safe-area-bottom: constant(safe-area-inset-bottom);
+    --safe-area-left: constant(safe-area-inset-left);
+    --safe-area-bottom-capped: min(var(--safe-area-bottom), 12px);
+  }
+}
+
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   /* Prevent overscroll/bounce on mobile */
   overscroll-behavior: none;
+  padding: var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom-capped)
+    var(--safe-area-left);
+  box-sizing: border-box;
+}
+
+#root {
+  height: 100%;
+  box-sizing: border-box;
 }
 
 /* Fallback for browsers without dvh support */