From ac7651811c0f85de65de94b50314f2b36b9bacd3 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 25 Sep 2025 17:00:42 +0200
Subject: [PATCH] fix: iOS Safari safe area - remove HTML height constraint and
 add body position fix

- Remove height: 100% from HTML element that was preventing safe area extension
- Add min-height with -webkit-fill-available instead
- Detect iOS devices and set body position:fixed for proper safe area handling
- iOS Safari requires body to be position:fixed for content to extend into safe areas

This addresses the root cause: parent element constraints preventing video extension
---
 apps/website/assets/css/main.css        |  7 ++++---
 apps/website/components/HeroSection.vue | 13 ++++++++++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/apps/website/assets/css/main.css b/apps/website/assets/css/main.css
index 2505917..f8822ff 100644
--- a/apps/website/assets/css/main.css
+++ b/apps/website/assets/css/main.css
@@ -21,9 +21,10 @@ html {
   scroll-behavior: smooth;
   overscroll-behavior-y: contain;
   -webkit-overflow-scrolling: touch;
-  /* Proper iOS viewport handling */
-  height: 100%;
-  height: -webkit-fill-available;
+  /* Remove height constraint to allow safe area extension */
+  /* height: 100%; -- REMOVED: This prevents safe area extension! */
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
   /* Allow video to extend horizontally */
   max-width: 100vw !important;
 }
diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index 45d6af9..55006f0 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -112,7 +112,18 @@ const animateCount = () => {
 }
 
 onMounted(() => {
-  // ULTIMATE FIX: Use inset: 0 and -webkit-fill-available to bypass env() bugs
+  // FINAL FIX: iOS detection and body positioning for safe area extension
+  const isIOS = /iPhone|iPad|iPod/.test(navigator.userAgent);
+
+  if (isIOS) {
+    // iOS Safari requires body to be position:fixed for safe area extension
+    document.body.style.position = 'fixed';
+    document.body.style.width = '100%';
+    document.body.style.top = '0';
+    document.body.style.left = '0';
+  }
+
+  // Inject video with proper positioning
   const videoHTML = `
     <style>
       #ios-video-bg {