From c81ddbdbc83da9ca6fbc19d90105f56effb8e56c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 17 May 2026 00:36:10 +0200
Subject: [PATCH] mobile: TopBar reserves safe-area-inset-top for iOS PWA
 notched iPhones
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The sticky header was h-16 with no safe-area handling. On notched
iPhones (~44 px status-bar inset) the iOS PWA painted the status bar
over the header — the HealthLog logo + auth controls clipped under
the system clock. Adding the inset as inline padding-top reserves the
overlay without touching the 64 px content baseline.

Inline `style` over a Tailwind class because Tailwind doesn't expose
`pt-[env(safe-area-inset-top)]` without arbitrary-value escaping and
the inline form is clearer in the diff.
---
 src/components/layout/top-bar.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/layout/top-bar.tsx b/src/components/layout/top-bar.tsx
index 10a2996fe..3564e19a3 100644
--- a/src/components/layout/top-bar.tsx
+++ b/src/components/layout/top-bar.tsx
@@ -44,7 +44,15 @@ export function TopBar() {
     );
 
   return (
-    <header className="bg-card/80 border-border sticky top-0 z-40 flex h-16 items-center justify-between border-b px-4 backdrop-blur-md md:px-6">
+    <header
+      className="bg-card/80 border-border sticky top-0 z-40 flex h-16 items-center justify-between border-b px-4 backdrop-blur-md md:px-6"
+      // iOS PWA on notched iPhones overlays the status bar onto the
+      // sticky header unless we reserve the safe-area inset. The
+      // inline style adds `safe-area-inset-top` as padding-top on
+      // devices that report one and is a no-op on every other
+      // platform; the inner h-16 content area stays nominally 64 px.
+      style={{ paddingTop: "env(safe-area-inset-top, 0px)" }}
+    >
       {/* Mobile logo */}
       <Link href="/" className="flex items-center gap-2 md:hidden">
         <Logo className="text-primary" size={20} />