From 06ce6e6cac8b52694a656222f4a639dbcbc7aa56 Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Sun, 21 Sep 2025 13:38:51 +0200
Subject: [PATCH] fix: use negative positioning for iOS notch video extension

- Replace broken fixed positioning with absolute + negative top
- Video now extends calc(-1 * env(safe-area-inset-top)) above container
- Height compensated with calc(100dvh + env(safe-area-inset-top))
- Container uses position: relative with overflow: visible
- Fixes iOS Safari bug where fixed positioning doesn't work properly

This approach allows the video to extend under the iOS notch/Dynamic Island
while keeping interactive content in safe areas.
---
 apps/website/assets/css/voyage-layout.css | 27 +++++++++++------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index c52b60d..ca5d939 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -1674,28 +1674,27 @@ html {
 /* Responsive */
 @media (max-width: 768px) {
     .hero-voyage {
+        /* Use relative positioning to contain the absolutely positioned video */
+        position: relative;
         padding: 0;
-        /* iOS-specific height handling */
-        height: 100vh;
-        height: -webkit-fill-available;
+        /* Set height to dynamic viewport height */
         height: 100dvh;
-        min-height: 100vh;
-        min-height: -webkit-fill-available;
         min-height: 100dvh;
-        /* Video will extend under notch - no padding-top here */
-        padding-bottom: env(safe-area-inset-bottom);
-        overflow-x: hidden !important;
+        /* CRITICAL: Allow overflow visible so video can extend beyond container */
+        overflow: visible !important;
         max-width: 100vw !important;
     }
 
-    /* Make video container fixed on mobile to fill entire viewport including notch */
+    /* Use negative positioning to extend video into notch area */
     .hero-video-container {
-        position: fixed !important;
-        inset: 0;
+        position: absolute !important;
+        /* Negative top to extend into notch area */
+        top: calc(-1 * env(safe-area-inset-top, 0px));
+        left: 0;
+        right: 0;
         width: 100vw;
-        height: 100vh;
-        height: -webkit-fill-available;
-        height: 100dvh;
+        /* Height includes the safe area we're extending into */
+        height: calc(100dvh + env(safe-area-inset-top, 0px));
         z-index: 0;
         pointer-events: none;
     }