From c53ac80779fcd062d944c4a71324587e55a49759 Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Sun, 21 Sep 2025 19:59:30 +0200
Subject: [PATCH] fix: restructure layout to allow video extension into iOS
 safe area
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create custom hero layout without constraining wrapper div
- Remove min-h-screen and flex constraints that block video extension
- Change video to position:fixed with z-index:-1 for proper layering
- Fix overflow:clip to overflow:visible in voyage-layout.css
- Revert transparent background to black for stability

This finally solves the iOS Safari safe area issue by removing the DOM
structure constraints that were preventing the video from extending.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/website/assets/css/main.css          |  4 ++--
 apps/website/assets/css/voyage-layout.css |  2 +-
 apps/website/components/HeroSection.vue   | 10 +++++-----
 apps/website/layouts/hero.vue             | 12 ++++++++++++
 apps/website/pages/index.vue              |  4 ++++
 5 files changed, 24 insertions(+), 8 deletions(-)
 create mode 100644 apps/website/layouts/hero.vue

diff --git a/apps/website/assets/css/main.css b/apps/website/assets/css/main.css
index 2c7f47c..df9db41 100644
--- a/apps/website/assets/css/main.css
+++ b/apps/website/assets/css/main.css
@@ -7,8 +7,8 @@
 html, body {
   margin: 0;
   padding: 0;
-  /* Transparent background to allow video in safe area */
-  background: transparent;
+  /* Background color for areas not covered by video */
+  background: #000; /* Black background as fallback */
 }
 
 /* Smooth Scroll Behavior and iOS Overscroll Prevention */
diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index 871db45..6ceeb65 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -1729,7 +1729,7 @@ html {
         min-height: 100dvh;
         /* Video will extend under notch - no padding-top here */
         padding-bottom: env(safe-area-inset-bottom);
-        overflow: clip; /* Allow video to extend while preventing scrollbars */
+        overflow: visible; /* Allow video to extend into safe area */
         max-width: 100vw !important;
     }
 
diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index 56816a6..fcd4ad7 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -172,20 +172,19 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* Hero video container using standard safe-area-inset-top for iOS Safari */
+/* Hero video container using fixed positioning for iOS Safari safe area */
 .hero-video-container {
-  position: absolute;
+  position: fixed !important; /* Fixed to extend beyond layout constraints */
   left: 0;
   right: 0;
   width: 100vw;
-  /* 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-inset-top, 0px));
-  z-index: 0;
+  z-index: -1; /* Behind all content */
   pointer-events: none;
-  /* Removed white background to allow transparency */
+  /* No background color to allow video visibility */
 }
 
 /* iOS Safari portrait bug workaround - env() returns 0 in portrait */
@@ -267,6 +266,7 @@ onMounted(() => {
   min-height: 100vh;
   /* Allow video to extend into safe area */
   overflow: visible;
+  z-index: 1; /* Above fixed video background */
 }
 
 .hero-main {
diff --git a/apps/website/layouts/hero.vue b/apps/website/layouts/hero.vue
new file mode 100644
index 0000000..39890b1
--- /dev/null
+++ b/apps/website/layouts/hero.vue
@@ -0,0 +1,12 @@
+<template>
+  <!-- Custom layout for hero page without constraining wrapper div -->
+  <!-- This allows the hero video to extend into iOS safe area -->
+  <AppNavbar />
+  <slot />
+  <AppFooter />
+</template>
+
+<script setup lang="ts">
+// Custom layout for pages with hero sections that need to extend into safe areas
+// No wrapper div means no flex constraints blocking video extension
+</script>
\ No newline at end of file
diff --git a/apps/website/pages/index.vue b/apps/website/pages/index.vue
index 77cdf03..b150826 100644
--- a/apps/website/pages/index.vue
+++ b/apps/website/pages/index.vue
@@ -24,6 +24,10 @@
 </template>
 
 <script setup lang="ts">
+// Use custom hero layout without constraining wrapper
+definePageMeta({
+  layout: 'hero'
+})
 // SEO meta tags aligned with static mockup
 useHead({
   title: 'Harbor Smith - Personalized Service Maintenance For Your Boat',