From 5668686f599063d9d4d9f0285e1aeced34a0994c Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Wed, 12 Aug 2026 11:46:35 -0400
Subject: [PATCH] Fix PWA header buttons unreachable on iPad

black-translucent status bar overlays page content, pushing the top
nav buttons behind the status bar where they can't be tapped. Switch
to black (status bar takes its own space, content starts below).

Also add env(safe-area-inset-top) padding on <header> elements when
running in standalone/PWA mode so notched iPhones are handled too.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html    | 2 +-
 src/index.css | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index fc2ebcd..eb2d9d8 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
 
     <!-- iOS PWA -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
     <meta name="apple-mobile-web-app-title" content="Bible Study" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 
diff --git a/src/index.css b/src/index.css
index 84b6a20..e6636bd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -30,6 +30,13 @@ select {
   font: inherit;
 }
 
+/* When installed as a PWA, push header content below the status bar */
+@media all and (display-mode: standalone) {
+  header {
+    padding-top: env(safe-area-inset-top, 0px);
+  }
+}
+
 .scrollbar-thin::-webkit-scrollbar {
   width: 9px;
   height: 9px;