Fix iOS PWA full-screen layout (black bars + safe-area bleed)

frontend/src/AdminApp.tsx

@@ -17,7 +17,7 @@ export default function AdminApp() {
   const [active, setActive] = useState<Section>('metrics')
 
   return (
-    <div className="flex h-screen w-screen bg-[#0a0a0f] text-gray-200 font-mono overflow-hidden">
+    <div className="flex h-full w-full bg-[#0a0a0f] text-gray-200 font-mono overflow-hidden">
       {/* Sidebar */}
       <aside className="flex flex-col w-52 shrink-0 border-r border-white/10 bg-black/40">
         <div className="flex items-center gap-2 px-4 py-4 border-b border-white/10">

frontend/src/App.tsx

@@ -61,7 +61,7 @@ function Dashboard() {
 
   return (
     <div
-      className="dark h-screen w-screen overflow-hidden flex flex-col font-body text-sm antialiased bg-onyx-black text-on-surface pt-safe pb-[calc(3.5rem_+_env(safe-area-inset-bottom))] lg:pb-0"
+      className="dark h-full w-full overflow-hidden flex flex-col font-body text-sm antialiased bg-onyx-black text-on-surface pt-safe pb-[calc(3.5rem_+_env(safe-area-inset-bottom))] lg:pb-0"
       data-mode={mode}
     >
       {/* Map Background Layer */}
@@ -175,7 +175,7 @@ export default function App() {
   }, [])
 
   if (!authChecked) return (
-    <div className="w-screen h-screen bg-onyx-black flex flex-col items-center justify-center gap-6">
+    <div className="w-full h-full bg-onyx-black flex flex-col items-center justify-center gap-6">
       {/* Scope mark — static corner brackets, rotating diamond, pulsing amber center */}
       <svg width="64" height="64" viewBox="0 0 32 32" aria-hidden="true" className="text-white">
         <g fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square">

frontend/src/components/LoginPage.tsx

@@ -44,7 +44,7 @@ function ScopeMark({ size = 56 }: { size?: number }) {
 function Shell({ children }: { children: React.ReactNode }) {
   return (
     <div
-      className="h-screen w-screen flex items-center justify-center bg-onyx-black"
+      className="h-full w-full flex items-center justify-center bg-onyx-black"
       style={{
         backgroundImage: [
           'linear-gradient(180deg, rgba(255,184,0,0.018) 0%, transparent 50%, rgba(0,0,0,0.4) 100%)',

frontend/src/index.css

@@ -4,7 +4,6 @@
 
 @layer base {
   html, body, #root {
-    height: 100%;
     overflow: hidden;
     /* Lock the iOS standalone PWA: no rubber-band overscroll that reveals a
        white/background gutter behind the fixed map + chrome. */
@@ -15,6 +14,29 @@
     text-size-adjust: 100%;
   }
 
+  html, body {
+    height: 100%;
+  }
+
+  /* Full-bleed app shell.
+     iOS standalone PWAs are notoriously inconsistent about height: `100vh`
+     and `height: 100%` can resolve to the *safe* viewport (innerHeight, e.g.
+     894px) rather than the full screen (956px), which leaves a black
+     letterbox bar and makes the app look like it isn't using the whole
+     display. Pinning #root with `position: fixed; inset: 0` anchors it to the
+     full layout viewport — which, with viewport-fit=cover, is the entire
+     screen including the notch and home-indicator areas — so the app always
+     paints edge-to-edge. `100dvh` is kept as a fallback for engines that
+     don't honour the fixed-inset trick. Safe-area padding *inside* the shell
+     (pt-safe / pb-safe, applied per component) keeps chrome clear of the
+     unsafe zones. */
+  #root {
+    position: fixed;
+    inset: 0;
+    height: 100%;
+    height: 100dvh;
+  }
+
   body {
     background-color: #050505;
     color: #F2F2F2;