From 934985c07cd18f0c555c9ddd7440ae29f7e4c670 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Fri, 26 Sep 2025 20:17:18 +0200
Subject: [PATCH] fix: critical mobile iOS issues - scrolling and safe areas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CRITICAL FIXES:
1. Removed iOS position:fixed hack that completely broke scrolling
   - Users can now scroll on iPhones/iPads (site was unusable before)

2. Fixed video not extending into safe areas
   - Video now properly fills the entire screen including notch areas
   - Used CSS env() variables with negative margins for full-bleed effect
   - Content respects safe areas with proper padding

3. Added explicit white background fallback
   - White background shows if video fails to load
   - No longer relies on implicit browser defaults

The site is now fully functional on iOS devices with proper safe area
handling and immersive video experience as intended.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/globals.css            | 27 +++++++++++++++++++++++++--
 components/HeroSection.tsx | 15 ++++-----------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 8b98515..0b4c94b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -7,6 +7,7 @@ html {
   /* Allow content to extend into safe areas */
   min-height: 100vh;
   min-height: -webkit-fill-available;
+  background: white; /* Explicit white fallback */
 }
 
 body {
@@ -14,6 +15,28 @@ body {
   padding: 0;
   min-height: 100vh;
   min-height: -webkit-fill-available;
-  /* Transparent background to allow video to show through */
-  background: transparent;
+  background: white; /* Explicit white fallback */
+  overflow-x: hidden; /* Prevent horizontal scroll */
+}
+
+/* Full-bleed video that extends into safe areas */
+.full-bleed-video-container {
+  position: absolute;
+  /* Extend beyond viewport into safe areas using negative margins */
+  top: calc(env(safe-area-inset-top, 0px) * -1);
+  left: calc(env(safe-area-inset-left, 0px) * -1);
+  right: calc(env(safe-area-inset-right, 0px) * -1);
+  bottom: calc(env(safe-area-inset-bottom, 0px) * -1);
+  width: calc(100% + env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
+  height: calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
+  background: white; /* White fallback when video doesn't load */
+}
+
+/* Safe area padding for content */
+.safe-area-padding-top {
+  padding-top: env(safe-area-inset-top, 0px);
+}
+
+.safe-area-padding-bottom {
+  padding-bottom: env(safe-area-inset-bottom, 0px);
 }
\ No newline at end of file
diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
index f41b590..fbac31b 100644
--- a/components/HeroSection.tsx
+++ b/components/HeroSection.tsx
@@ -7,13 +7,6 @@ export default function HeroSection() {
   const [videoLoaded, setVideoLoaded] = useState(false)
 
   useEffect(() => {
-    // Detect iOS and set body position for safe area support
-    const isIOS = /iPhone|iPad|iPod/.test(navigator.userAgent)
-    if (isIOS) {
-      document.body.style.position = 'fixed'
-      document.body.style.width = '100%'
-    }
-
     // Handle video loading with fallback
     const video = document.getElementById('hero-video') as HTMLVideoElement
     if (video) {
@@ -46,8 +39,8 @@ export default function HeroSection() {
 
   return (
     <section className="relative h-screen w-full overflow-hidden">
-      {/* Video Background */}
-      <div className="absolute inset-0 w-full h-full">
+      {/* Video Background - Full bleed into safe areas */}
+      <div className="full-bleed-video-container">
         <video
           id="hero-video"
           autoPlay
@@ -66,8 +59,8 @@ export default function HeroSection() {
       {/* Overlay - Separate from video container */}
       <div className="absolute inset-0 bg-gradient-to-b from-harbor-blue/30 via-harbor-blue/50 to-harbor-blue/70 z-[1]" />
 
-      {/* Hero Content */}
-      <div className={`relative z-10 flex h-full flex-col items-center justify-start pt-24 md:justify-center md:pt-0 px-4 text-white transition-opacity duration-1000 ${videoLoaded ? 'opacity-100' : 'opacity-0'}`}>
+      {/* Hero Content - Respect safe areas */}
+      <div className={`relative z-10 flex h-full flex-col items-center justify-start pt-24 md:justify-center md:pt-0 px-4 text-white transition-opacity duration-1000 safe-area-padding-top ${videoLoaded ? 'opacity-100' : 'opacity-0'}`}>
         <div className="max-w-3xl text-center">
           {/* Logo - Responsive sizing */}
           <img