From b371c50d2310427a88bd1f7a47a22e3db37770ac Mon Sep 17 00:00:00 2001 From: Arda Samadi Date: Thu, 9 Jul 2026 11:35:12 +0330 Subject: [PATCH] fix(pwa): add apple-mobile-web-app-capable so iOS applies safe-area insets MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On iOS, apple-mobile-web-app-status-bar-style: black-translucent has no effect unless apple-mobile-web-app-capable=yes is also set. Without it the installed PWA never went edge-to-edge, so env(safe-area-inset-top) resolved to 0 and the header padding did nothing — content ran under the notch. Android was unaffected (it honors mobile-web-app-capable, which was already present). Co-Authored-By: Claude Opus 4.8 --- app/root.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/root.tsx b/app/root.tsx index ffa3e01..9e04c51 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -136,6 +136,11 @@ export function Layout({ children }: { children: React.ReactNode }) { /> + {/* iOS-specific: standalone mode. Required for the status-bar-style + below to take effect — without it iOS ignores black-translucent, + so the app isn't edge-to-edge and env(safe-area-inset-top) doesn't + line up with the headers. (Android uses mobile-web-app-capable.) */} +