Fix top padding and safe areas for iOS PWA

index.html

@@ -21,6 +21,8 @@
   <meta name="theme-color" content="#120f1d" />
 
   <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+
   <link rel="apple-touch-startup-image"
     media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
     href="/splash_screens/iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_landscape.png">

src/assets/css/index.css

@@ -43,6 +43,10 @@ html[data-no-scroll], html[data-no-scroll] body {
   overflow: hidden;
 }
 
+.top-content {
+  padding-top: calc(env(safe-area-inset-top) - 20px);
+}
+
 .roll {
   animation: roll 1s;
 }

src/components/layout/Navigation.tsx

@@ -47,14 +47,14 @@ export function Navigation(props: NavigationProps) {
 
       {/* backgrounds - these are seperate because of z-index issues */}
       <div
-        className="fixed z-[20] pointer-events-none left-0 right-0 top-0 min-h-[150px]"
+        className="top-content fixed z-[20] pointer-events-none left-0 right-0 top-0 min-h-[150px]"
         style={{
           top: `${bannerHeight}px`,
         }}
       >
         <div
           className={classNames(
-            "fixed left-0 right-0 h-20 flex items-center",
+            "fixed left-0 right-0 top-0 flex items-center",
             props.doBackground
               ? "bg-background-main border-b border-utils-divider border-opacity-50"
               : null,
@@ -78,7 +78,7 @@ export function Navigation(props: NavigationProps) {
 
       {/* content */}
       <div
-        className="fixed pointer-events-none left-0 right-0 z-[60] top-0 min-h-[150px]"
+        className="top-content fixed pointer-events-none left-0 right-0 z-[60] top-0 min-h-[150px]"
         style={{
           top: `${bannerHeight}px`,
         }}

src/components/player/base/TopControls.tsx

@@ -44,7 +44,7 @@ export function TopControls(props: {
         <Transition
           animation="slide-down"
           show={props.show}
-          className="text-white"
+          className="top-content text-white"
         >
           {props.children}
         </Transition>

src/pages/parts/home/HeroPart.tsx

@@ -39,20 +39,30 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
     },
     [setShowBg, setIsSticky],
   );
+  const { width: windowWidth, height: windowHeight } = useWindowSize();
 
-  const { width: windowWidth } = useWindowSize();
+  // Detect if running as a PWA on iOS
+  const isIOSPWA =
+    /iPad|iPhone|iPod/i.test(navigator.userAgent) &&
+    window.matchMedia("(display-mode: standalone)").matches;
 
-  const topSpacing = 16;
+  const topSpacing = isIOSPWA ? 60 : 16;
   const [stickyOffset, setStickyOffset] = useState(topSpacing);
+
+  const isLandscape = windowHeight < windowWidth && isIOSPWA;
+  const adjustedOffset = isLandscape
+    ? -40 // landscape
+    : 0; // portrait
+
   useEffect(() => {
-    if (windowWidth > 1200) {
+    if (windowWidth > 1280) {
       // On large screens the bar goes inline with the nav elements
       setStickyOffset(topSpacing);
     } else {
       // On smaller screens the bar goes below the nav elements
-      setStickyOffset(topSpacing + 60);
+      setStickyOffset(topSpacing + 60 + adjustedOffset);
     }
-  }, [windowWidth]);
+  }, [adjustedOffset, topSpacing, windowWidth]);
 
   const time = getTimeOfDay(new Date());
   const title = randomT(`home.titles.${time}`);