From 1edbd364ea757e36a6d9df84896a15ee6400b431 Mon Sep 17 00:00:00 2001
From: nmemmert <67961292+nmemmert@users.noreply.github.com>
Date: Tue, 29 Sep 2026 11:38:51 -0400
Subject: [PATCH] Stop the page extending under the status bar; use
 visible-viewport units

Drops viewport-fit=cover so the iPad/iPhone status bar is its own area and the system's
top-edge blur no longer covers the app bar. Fixed-height study stages are position:fixed so
they cannot scroll the document, and min-h-screen/100vh become dvh units.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 index.html                           |  2 +-
 src/App.jsx                          | 12 ++++++------
 src/components/study/PageShell.jsx   |  2 +-
 src/components/study/StudioShell.jsx |  2 +-
 src/pages/AuthPage.jsx               |  4 ++--
 src/pages/ReaderPage.jsx             |  2 +-
 src/pages/ReadingPlansPage.jsx       |  2 +-
 7 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index b96c0e2..d0b6a30 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Bible Study Project</title>
 
     <!-- PWA manifest -->
diff --git a/src/App.jsx b/src/App.jsx
index bb1793c..af78e66 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -330,7 +330,7 @@ const App = () => {
 
 function PageLoading() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-slate-900">
+    <div className="flex min-h-dvh items-center justify-center bg-slate-900">
       <p className="text-sm text-slate-400">Loading…</p>
     </div>
   );
@@ -343,7 +343,7 @@ function AppRouter() {
   if (sharedViewToken) {
     if (sharedError) {
       return (
-        <div className="flex min-h-screen items-center justify-center bg-slate-900 px-4">
+        <div className="flex min-h-dvh items-center justify-center bg-slate-900 px-4">
           <div className="w-full max-w-sm rounded-3xl border border-white/10 bg-white p-8 text-center shadow-panel">
             <p className="text-sm uppercase tracking-[0.24em] text-slate-400">Bible Study Project</p>
             <p className="mt-4 text-sm text-rose-600">{sharedError}</p>
@@ -353,13 +353,13 @@ function AppRouter() {
     }
     if (!sharedProject) {
       return (
-        <div className="flex min-h-screen items-center justify-center bg-slate-900">
+        <div className="flex min-h-dvh items-center justify-center bg-slate-900">
           <p className="text-sm text-slate-400">Loading shared study…</p>
         </div>
       );
     }
     return (
-      <div className="min-h-screen bg-slate-100">
+      <div className="min-h-dvh bg-slate-100">
         <div className="border-b border-slate-200 bg-slate-900 px-4 py-3 text-center text-xs text-slate-300">
           🔗 Read-only shared view —{' '}
           <a href="/" className="underline hover:text-white">go to Bible Study Project</a>
@@ -368,7 +368,7 @@ function AppRouter() {
           title="Shared study"
           srcDoc={buildExportHtml(sharedProject)}
           sandbox="allow-popups"
-          className="h-[calc(100vh-2.5rem)] w-full border-0"
+          className="h-[calc(100dvh-2.5rem)] w-full border-0"
         />
       </div>
     );
@@ -376,7 +376,7 @@ function AppRouter() {
 
   if (authUser === undefined && !authServerDown) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-slate-900">
+      <div className="flex min-h-dvh items-center justify-center bg-slate-900">
         <p className="text-sm text-slate-400">Loading…</p>
       </div>
     );
diff --git a/src/components/study/PageShell.jsx b/src/components/study/PageShell.jsx
index ae47a84..1fcfe73 100644
--- a/src/components/study/PageShell.jsx
+++ b/src/components/study/PageShell.jsx
@@ -64,7 +64,7 @@ export default function PageShell({ title, onBack, actions, active = null, maxWi
   const { readerTheme, goHome, goStudies, openBibleReader, openReadingPlans } = useApp();
   const go = { studies: goStudies, reader: openBibleReader, plans: openReadingPlans };
   return (
-    <div className="min-h-screen bg-[var(--r-bg)] font-sans text-[var(--r-text)]" style={themeVars(readerTheme)}>
+    <div className="min-h-dvh bg-[var(--r-bg)] font-sans text-[var(--r-text)]" style={themeVars(readerTheme)}>
       <header className="safe-top sticky top-0 z-30 border-b border-[var(--r-line)] bg-[var(--r-bar)]">
         <div className={`mx-auto flex h-12 ${maxWidth} items-center gap-4 px-4`}>
           <button type="button" onClick={goHome} className="flex shrink-0 items-center gap-2" aria-label="Bible Study home">
diff --git a/src/components/study/StudioShell.jsx b/src/components/study/StudioShell.jsx
index 10cca06..758cdd6 100644
--- a/src/components/study/StudioShell.jsx
+++ b/src/components/study/StudioShell.jsx
@@ -23,7 +23,7 @@ export default function StudioShell({ stage, loading = false, fixedHeight = fals
   const cycleTheme = () => setReaderTheme(THEME_ORDER[(THEME_ORDER.indexOf(readerTheme) + 1) % THEME_ORDER.length]);
 
   return (
-    <div className={`bg-[var(--r-bg)] font-sans text-[var(--r-text)] ${fixedHeight ? 'flex h-screen flex-col overflow-hidden' : 'min-h-screen'}`} style={themeVars(readerTheme)}>
+    <div className={`bg-[var(--r-bg)] font-sans text-[var(--r-text)] ${fixedHeight ? 'fixed inset-0 flex flex-col overflow-hidden' : 'min-h-dvh'}`} style={themeVars(readerTheme)}>
       <div className="safe-top z-30 shrink-0 border-b border-[var(--r-line)] bg-[var(--r-bar)]">
         <div className="mx-auto flex h-12 max-w-[1600px] items-center gap-3 px-3">
           <button type="button" onClick={goHome} aria-label="Back to home"
diff --git a/src/pages/AuthPage.jsx b/src/pages/AuthPage.jsx
index 097bb28..fe27752 100644
--- a/src/pages/AuthPage.jsx
+++ b/src/pages/AuthPage.jsx
@@ -51,7 +51,7 @@ export default function AuthPage() {
 
   if (authMfaPending) {
     return (
-      <div {...shell} className="flex min-h-screen items-center justify-center bg-[var(--r-bg)] px-4 text-[var(--r-text)]">
+      <div {...shell} className="flex min-h-dvh items-center justify-center bg-[var(--r-bg)] px-4 text-[var(--r-text)]">
         <div className="w-full max-w-sm rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-8">
           <p className="text-sm uppercase tracking-[0.24em] text-[var(--r-sub)]">Bible Study Project</p>
           <h1 className="mt-2 text-xl font-medium text-[var(--r-text)]">Two-factor verification</h1>
@@ -109,7 +109,7 @@ export default function AuthPage() {
   }
 
   return (
-    <div {...shell} className="flex min-h-screen items-center justify-center bg-[var(--r-bg)] px-4 py-12 text-[var(--r-text)]">
+    <div {...shell} className="flex min-h-dvh items-center justify-center bg-[var(--r-bg)] px-4 py-12 text-[var(--r-text)]">
       <div className="grid w-full max-w-5xl items-center gap-16 lg:grid-cols-2">
         {/* Branding / feature panel — hidden on small screens to keep the form front and center there */}
         <div className="hidden lg:block">
diff --git a/src/pages/ReaderPage.jsx b/src/pages/ReaderPage.jsx
index c084367..6cb21e2 100644
--- a/src/pages/ReaderPage.jsx
+++ b/src/pages/ReaderPage.jsx
@@ -328,7 +328,7 @@ export default function ReaderPage() {
   const paneOpen = !!selectedVerse && !readerDrawMode;
 
   return (
-    <div className="min-h-screen bg-[var(--r-bg)] text-[var(--r-text)]" style={themeVars(readerTheme)}
+    <div className="min-h-dvh bg-[var(--r-bg)] text-[var(--r-text)]" style={themeVars(readerTheme)}
          onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd}>
       {chromeVisible && (
         <TopBar
diff --git a/src/pages/ReadingPlansPage.jsx b/src/pages/ReadingPlansPage.jsx
index c91f39f..dd25701 100644
--- a/src/pages/ReadingPlansPage.jsx
+++ b/src/pages/ReadingPlansPage.jsx
@@ -100,7 +100,7 @@ export default function ReadingPlansPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[var(--r-bg)] pb-16 text-[var(--r-text)]" style={themeVars(readerTheme)}>
+    <div className="min-h-dvh bg-[var(--r-bg)] pb-16 text-[var(--r-text)]" style={themeVars(readerTheme)}>
       <div className="safe-top sticky top-0 z-30 border-b border-[var(--r-line)] bg-[var(--r-bar)] font-sans">
         <div className="mx-auto flex h-12 max-w-3xl items-center gap-1 px-2">
           <button type="button" onClick={goHome} aria-label="Back to home" className="flex h-9 items-center gap-0.5 rounded-lg pl-1 pr-2 text-[var(--r-sub)] hover:bg-black/5"><ChevronLeft /><span className="hidden text-xs sm:inline">Home</span></button>