Adjust how app dispalys as PWA to enable safe areas

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}

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 */