fix: (iOS) PWA header for Home and Profile pages

thanks @leafwind.tw

src/components/Layout/Header/index.tsx

···
         gutters,
         platform({
           native: [a.pb_xs, {minHeight: 48}],
-          web: [a.py_xs, {minHeight: 52}],
+          web: [
+            a.py_xs,
+            {
+              minHeight: 52,
+              paddingTop: 'env(safe-area-inset-top)',
+            },
+          ],
         }),
         t.atoms.border_contrast_low,
         gtMobile && [a.mx_auto, {maxWidth: 600}],

src/screens/Profile/Header/Shell.tsx

···
-import {memo, useCallback, useEffect, useMemo} from 'react'
+import {memo, useCallback, useEffect, useMemo, useRef} from 'react'
 import {Pressable, TouchableWithoutFeedback, View} from 'react-native'
 import Animated, {
   measure,
···
 
   const aviRef = useAnimatedRef()
   const bannerRef = useAnimatedRef<Animated.View>()
+  const containerRef = useRef<View>(null)
+
+  // Apply safe-area CSS on web
+  useEffect(() => {
+    if (containerRef.current && typeof window !== 'undefined') {
+      const element = containerRef.current as any
+      if (element.style) {
+        element.style.paddingTop = 'env(safe-area-inset-top)'
+      }
+    }
+  }, [])
 
   const onPressBack = useCallback(() => {
     if (navigation.canGoBack()) {
···
   }, [profile.banner, moderation, _openLightboxBanner, bannerRef])
 
   return (
-    <View style={t.atoms.bg} pointerEvents={IS_IOS ? 'auto' : 'box-none'}>
+    <View
+      ref={containerRef}
+      style={t.atoms.bg}
+      pointerEvents={IS_IOS ? 'auto' : 'box-none'}>
       <View
         pointerEvents={IS_IOS ? 'auto' : 'box-none'}
         style={[a.relative, {height: 150}]}>