From 73c195ab58ef8a254aa248220716f9ac10865843 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 25 Sep 2025 16:46:49 +0200
Subject: [PATCH] fix: use negative positioning to extend video into iOS safe
 areas

- Change top from 0 to calc(-1 * env(safe-area-inset-top, 0px))
- Increase height to calc(100vh + env(safe-area-inset-top, 0px))
- Fix object-position to 'top center' to anchor video at top edge
- This pulls the video container UP into the safe area instead of starting at its boundary
---
 apps/website/components/HeroSection.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index b051e8e..28ca789 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -116,12 +116,12 @@ onMounted(() => {
   const videoHTML = `
     <div id="ios-video-bg" style="
       position: fixed;
-      top: 0;
+      top: calc(-1 * env(safe-area-inset-top, 0px));
       left: 0;
       right: 0;
       bottom: 0;
       width: 100vw;
-      height: 100vh;
+      height: calc(100vh + env(safe-area-inset-top, 0px));
       z-index: -1;
       background: #000;
     ">
@@ -135,7 +135,7 @@ onMounted(() => {
           width: 100%;
           height: 100%;
           object-fit: cover;
-          object-position: center top;
+          object-position: top center;
         ">
         <source src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4" type="video/mp4">
       </video>