From ae3aefd41bed1728c09b012930ba9405844a8aa9 Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Fri, 19 Sep 2025 10:50:21 +0200
Subject: [PATCH] Fix iPhone Safari viewport issue - hero section now fills
 entire screen

- Removed safe area padding from .hero-voyage container (was reducing height)
- Simplified video container positioning to fill parent (top:0, bottom:0)
- Applied safe area padding only to .hero-content to protect text/buttons
- Container now uses full viewport height without reduction

The issue was that adding safe area padding to the container itself was
reducing the available height instead of extending it. Safe areas should
only protect content from being obscured, not shrink containers.
---
 apps/website/assets/css/voyage-layout.css | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index b6ebb10..0b51e87 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -399,31 +399,27 @@ html {
 .hero-voyage {
     position: relative;
     height: 100vh; /* Fallback for browsers that don't support newer units */
-    height: -webkit-fill-available; /* iOS Safari */
+    height: -webkit-fill-available; /* iOS Safari - fills available space */
     height: 100dvh; /* Dynamic viewport height */
-    min-height: 100vh;
-    min-height: -webkit-fill-available;
-    min-height: 100dvh;
     overflow: hidden;
     overscroll-behavior-y: none;
     -webkit-overflow-scrolling: touch;
     overflow-x: hidden !important;
     max-width: 100vw !important;
     contain: layout;
-    /* Extend into safe areas on iOS */
-    padding-top: env(safe-area-inset-top);
-    padding-bottom: env(safe-area-inset-bottom);
+    /* NO padding here - let container fill entire viewport */
+    /* Safe areas will be applied to content only */
 }
 
 .hero-video-container {
     position: absolute;
-    /* Extend beyond safe areas */
-    top: calc(-1 * env(safe-area-inset-top));
+    /* Simple positioning - fill entire parent container */
+    top: 0;
     left: 0;
     right: 0;
-    bottom: calc(-1 * env(safe-area-inset-bottom));
+    bottom: 0;
     width: 100%;
-    height: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
+    height: 100%;
     overflow: hidden;
     z-index: 1;
 }
@@ -460,14 +456,14 @@ html {
     position: relative;
     z-index: 10;
     height: 100%;
-    object-fit: cover;
     width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
-    padding: var(--space-md);
+    /* Apply safe area padding HERE to protect content from being obscured */
+    padding: max(env(safe-area-inset-top), var(--space-md)) var(--space-md) max(env(safe-area-inset-bottom), var(--space-md));
 }
 
 .trust-badge {