From 67ae33fc099f7223854354c402f80c4445270990 Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Sun, 21 Sep 2025 17:49:58 +0200
Subject: [PATCH] fixes

---
 apps/website/assets/css/voyage-layout.css | 10 +++++-
 apps/website/components/HeroSection.vue   | 44 +++++++++++++++++++----
 2 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index 58d7285..2c7cc33 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -504,7 +504,8 @@ html {
     position: relative;
     z-index: 10;
     height: 100%;
-    min-height: 100dvh;
+    min-height: 100vh; /* Fallback for browsers without dvh support */
+    min-height: 100dvh; /* Dynamic viewport height for Chrome mobile */
     width: 100%;
     display: grid;
     grid-template-rows: 1fr auto;
@@ -516,6 +517,13 @@ html {
     row-gap: clamp(2rem, 6vh, 4rem);
 }
 
+/* Ensure dvh support for modern browsers */
+@supports (min-height: 100dvh) {
+    .hero-content {
+        min-height: 100dvh;
+    }
+}
+
 .hero-main {
     width: min(720px, 100%);
     margin: 0 auto;
diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index f8d195f..fcaa9a2 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -172,17 +172,46 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* Hero video container positioned absolutely behind content */
+/* Hero video container - Fixed for both Safari notch and Chrome mobile */
 .hero-video-container {
   position: fixed;
-  top: env(safe-area-inset-top, 0); /* Start at safe area boundary */
+  top: 0;
   left: 0;
   width: 100vw;
-  height: calc(100vh + env(safe-area-inset-top, 0)); /* Extend height to cover full screen */
+  /* Use 100dvh for dynamic viewport (Chrome mobile fix) */
+  height: 100dvh;
+  /* Fallback for browsers without dvh support */
+  height: 100vh;
   z-index: 1;
-  transform: translateY(calc(-1 * env(safe-area-inset-top, 0))); /* Move up into notch/Dynamic Island */
   pointer-events: none;
-  background: #ffffff; /* White fallback */
+  background: #ffffff;
+}
+
+/* Additional support for browsers with dvh */
+@supports (height: 100dvh) {
+  .hero-video-container {
+    height: 100dvh;
+  }
+}
+
+/* Safari-specific fix for notch/Dynamic Island */
+@supports (-webkit-touch-callout: none) {
+  .hero-video-container {
+    /* Extend beyond safe area for Safari */
+    top: -50px; /* Covers notch (44px) and Dynamic Island (59px) */
+    height: calc(100vh + 50px);
+    /* Use dvh if available */
+    height: calc(100dvh + 50px);
+  }
+
+  /* Adjust for landscape orientation */
+  @media (orientation: landscape) {
+    .hero-video-container {
+      top: 0;
+      height: 100vh;
+      height: 100dvh;
+    }
+  }
 }
 
 /* Video fade-in transition to prevent flash */
@@ -192,7 +221,10 @@ onMounted(() => {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  object-position: center top; /* Align to top for better notch coverage */
+  object-position: center center;
+  /* Force GPU acceleration */
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
 }
 
 .hero-video.video-loaded {