fixed mobile background

Author: David Martin

src/layouts/Layout.astro

@@ -68,8 +68,10 @@ const imageURL = image.startsWith('http') ? image : new URL(image, Astro.site).h
 
     <!-- Additional meta tags for better social sharing -->
     <meta name="format-detection" content="telephone=no" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
+    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
 
     <!-- Structured Data -->
     <script type="application/ld+json">

src/styles/global.css

@@ -34,6 +34,9 @@ html.light {
   html {
     scroll-behavior: smooth;
     background-color: #000000; /* Pure black to match navbar and prevent white flash on scroll */
+    /* Extend background into safe area on iOS - this makes the browser chrome area black */
+    min-height: 100vh;
+    min-height: -webkit-fill-available; /* iOS Safari fix */
   }
 
   html.light {
@@ -46,7 +49,8 @@ html.light {
     background-color: var(--bg-primary);
     color: var(--text-primary);
     transition: background-color 0.3s, color 0.3s;
-    min-height: 100vh; /* Ensure body covers viewport */
+    min-height: 100vh;
+    min-height: -webkit-fill-available; /* iOS Safari fix */
   }
 }