From cea7577b5291e9516dca095fcaaf16354a5beb08 Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Sun, 21 Sep 2025 13:27:16 +0200
Subject: [PATCH] fix: remove CSS conflicts preventing iOS video from extending
 under notch

- Removed incorrect height calculation that added safe areas to video height
- Removed conflicting absolute positioning from main.css
- Video container now properly uses fixed positioning on mobile
- Desktop layout preserved with absolute positioning

The video now correctly extends edge-to-edge under the iOS notch/Dynamic Island
---
 apps/website/assets/css/main.css          | 10 +++++-----
 apps/website/assets/css/voyage-layout.css |  6 +-----
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/apps/website/assets/css/main.css b/apps/website/assets/css/main.css
index 889818f..60843da 100644
--- a/apps/website/assets/css/main.css
+++ b/apps/website/assets/css/main.css
@@ -38,10 +38,8 @@ body {
     height: 100dvh;
   }
 
-  .hero-video-container {
-    height: calc(100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
-    height: calc(100dvh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
-  }
+  /* Removed conflicting height calculation for hero-video-container
+     The video container should fill the viewport, not exceed it */
 }
 
 /* Handle dynamic viewport on mobile browsers */
@@ -311,8 +309,10 @@ body {
   }
 
   /* Hero Section */
+  /* Note: hero-video-container positioning is handled in voyage-layout.css
+     for proper mobile/desktop behavior and iOS notch support */
   .hero-video-container {
-    @apply absolute inset-0 w-full h-full overflow-hidden;
+    /* @apply absolute inset-0 w-full h-full overflow-hidden; */
     will-change: transform;
   }
 
diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index a26e7e5..c52b60d 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -425,11 +425,7 @@ html {
 
 .hero-video-container {
     position: absolute;
-    /* Simple positioning - fill entire parent container */
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;