From 8ec50fbf49d8b31eacc42bfe36547f6789224655 Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Sun, 21 Sep 2025 19:32:56 +0200
Subject: [PATCH] fix: comprehensive iOS Safari safe area video extension fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove invalid safe-area-max-inset-top (not a valid CSS property)
- Use standard safe-area-inset-top with iOS Safari workarounds
- Remove white background from video container (was blocking transparency)
- Change html/body background to transparent for safe area visibility
- Update status bar style to black-translucent for content under notch
- Add hardcoded fallbacks for iOS Safari portrait bug (env returns 0)

This fixes the issue where the video wasn't extending into the iPhone notch/Dynamic Island
by addressing the root causes: invalid CSS properties, blocking backgrounds, and Safari bugs.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/website/assets/css/main.css        |  3 ++-
 apps/website/components/HeroSection.vue | 33 +++++++++++++++++--------
 apps/website/nuxt.config.ts             |  2 +-
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/apps/website/assets/css/main.css b/apps/website/assets/css/main.css
index 9b7ca7b..2c7f47c 100644
--- a/apps/website/assets/css/main.css
+++ b/apps/website/assets/css/main.css
@@ -7,7 +7,8 @@
 html, body {
   margin: 0;
   padding: 0;
-  background: #fff; /* White background fallback for safe area */
+  /* Transparent background to allow video in safe area */
+  background: transparent;
 }
 
 /* Smooth Scroll Behavior and iOS Overscroll Prevention */
diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index f245a0a..56816a6 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -172,26 +172,26 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* Hero video container using safe-area-max-inset-top for iOS Safari */
+/* Hero video container using standard safe-area-inset-top for iOS Safari */
 .hero-video-container {
   position: absolute;
   left: 0;
   right: 0;
   width: 100vw;
-  /* Use safe-area-max-inset-top which always returns the notch height */
-  /* Pull up by the max safe area to extend under notch */
-  top: calc(-1 * env(safe-area-max-inset-top, 0px));
+  /* Use standard safe-area-inset-top */
+  /* Pull up by the safe area to extend under notch */
+  top: calc(-1 * env(safe-area-inset-top, 0px));
   /* Extend height to compensate */
-  height: calc(100vh + env(safe-area-max-inset-top, 0px));
+  height: calc(100vh + env(safe-area-inset-top, 0px));
   z-index: 0;
   pointer-events: none;
-  background: #ffffff;
+  /* Removed white background to allow transparency */
 }
 
-/* Fallback for browsers that don't support safe-area-max-inset-top */
-@supports not (padding: env(safe-area-max-inset-top)) {
+/* iOS Safari portrait bug workaround - env() returns 0 in portrait */
+@supports (-webkit-touch-callout: none) {
   .hero-video-container {
-    /* iPhone 14/15 Pro Dynamic Island fallback */
+    /* Hardcoded fallback for iPhone 14/15 Pro Dynamic Island */
     top: -59px;
     height: calc(100vh + 59px);
   }
@@ -208,7 +208,20 @@ onMounted(() => {
 /* Support for dynamic viewport height */
 @supports (height: 100dvh) {
   .hero-video-container {
-    height: calc(100dvh + env(safe-area-max-inset-top, 0px));
+    height: calc(100dvh + env(safe-area-inset-top, 0px));
+  }
+
+  /* iOS specific with dvh */
+  @supports (-webkit-touch-callout: none) {
+    .hero-video-container {
+      height: calc(100dvh + 59px); /* Dynamic Island */
+    }
+
+    @media screen and (max-height: 812px) {
+      .hero-video-container {
+        height: calc(100dvh + 44px); /* Notch */
+      }
+    }
   }
 }
 
diff --git a/apps/website/nuxt.config.ts b/apps/website/nuxt.config.ts
index a31dc2a..c0bd297 100644
--- a/apps/website/nuxt.config.ts
+++ b/apps/website/nuxt.config.ts
@@ -127,7 +127,7 @@ export default defineNuxtConfig({
         { name: 'robots', content: 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' },
         { name: 'theme-color', content: '#ffffff' },
         { name: 'apple-mobile-web-app-capable', content: 'yes' },
-        { name: 'apple-mobile-web-app-status-bar-style', content: 'default' },
+        { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
         // Open Graph
         { property: 'og:type', content: 'website' },
         { property: 'og:url', content: 'https://harborsmith.com' },