matt/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove CSS conflicts preventing iOS video from extending under notch
All checks were successful
build-website / build (push) Successful in 1m33s
Details

Browse Source 
- Removed incorrect height calculation that added safe areas to video height
- Removed conflicting absolute positioning from main.css
- Video container now properly uses fixed positioning on mobile
- Desktop layout preserved with absolute positioning

The video now correctly extends edge-to-edge under the iOS notch/Dynamic Island
This commit is contained in:
matt
2025-09-21 13:27:16 +02:00
parent b97be94e2f
commit cea7577b52
2 changed files with 6 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/website/assets/css/main.css
View File

@@ -38,10 +38,8 @@ body {
height: 100dvh;
}
.hero-video-container {
height: calc(100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
height: calc(100dvh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
}
/* Removed conflicting height calculation for hero-video-container
The video container should fill the viewport, not exceed it */
}
/* Handle dynamic viewport on mobile browsers */
@@ -311,8 +309,10 @@ body {
}
/* Hero Section */
/* Note: hero-video-container positioning is handled in voyage-layout.css
for proper mobile/desktop behavior and iOS notch support */
.hero-video-container {
@apply absolute inset-0 w-full h-full overflow-hidden;
/* @apply absolute inset-0 w-full h-full overflow-hidden; */
will-change: transform;
}

6
apps/website/assets/css/voyage-layout.css
View File

@@ -425,11 +425,7 @@ html {
.hero-video-container {
position: absolute;
/* Simple positioning - fill entire parent container */
top: 0;
left: 0;
right: 0;
bottom: 0;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;