From f4def70f2406d9789c8521d1b8e08efab136f75a Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Thu, 8 Jan 2026 11:48:19 -0800
Subject: [PATCH] fix(mobile): Add safe-area-inset-top padding to header for
 status bar

---
 frontend/index.html                | 3 ++-
 frontend/src/components/Layout.tsx | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 3405e40..7371136 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,7 +6,8 @@
   href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Merriweather:wght@300;400;700;900&display=swap"
   rel="stylesheet">
 <meta charset="UTF-8" />
-<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" />
 <meta name="theme-color" content="#10b981" />
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 85a72b4..b62e60e 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -56,7 +56,10 @@ export default function Layout() {
             {/* Main Content Area */}
             <div className="flex-1 flex flex-col min-w-0 overflow-hidden relative">
                 {/* Topbar - Search, Global Filters, Vitals */}
-                <header className="h-16 flex items-center justify-between px-4 sm:px-6 lg:px-8 border-b border-[var(--color-border-subtle)] bg-[var(--color-bg-secondary)]/80 backdrop-blur-xl z-20">
+                <header
+                    className="h-16 flex items-center justify-between px-4 sm:px-6 lg:px-8 border-b border-[var(--color-border-subtle)] bg-[var(--color-bg-secondary)]/80 backdrop-blur-xl z-20"
+                    style={{ paddingTop: 'env(safe-area-inset-top)' }}
+                >
                     <div className="flex items-center gap-4 flex-1">
                         {/* Facility Switcher / Filter */}
                         <div className="hidden md:flex items-center gap-2 px-3 py-1.5 rounded-full bg-[var(--color-bg-tertiary)] border border-[var(--color-border-subtle)] cursor-pointer hover:border-[var(--color-border-default)] transition-all">