Merge pull request #21 from eurosky-social/eurosky/fork

add safe area insets

Author: flo-bit

src/view/com/home/HomeHeaderLayoutMobile.tsx

@@ -20,7 +20,7 @@ import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/H
 import * as Layout from '#/components/Layout'
 import {Link} from '#/components/Link'
 import {useAnalytics} from '#/analytics'
-import {IS_DEV, IS_LIQUID_GLASS} from '#/env'
+import {IS_DEV, IS_LIQUID_GLASS, IS_WEB} from '#/env'
 
 export function HomeHeaderLayoutMobile({
   children,
@@ -49,7 +49,10 @@ export function HomeHeaderLayoutMobile({
           left: 0,
           right: 0,
         },
-        IS_LIQUID_GLASS && {paddingTop: insets.top},
+        // Eurosky fork: the home header is position:fixed at top:0, so on web
+        // (incl. standalone PWA) it must pad past the notch/Dynamic Island.
+        // Other screens get this via Layout.Screen; the fixed home header does not.
+        (IS_LIQUID_GLASS || IS_WEB) && {paddingTop: insets.top},
         headerMinimalShellTransform,
       ]}
       onLayout={e => {

src/view/shell/bottom-bar/BottomBarWeb.tsx

@@ -1,6 +1,7 @@
 import {useCallback} from 'react'
 import {View} from 'react-native'
 import Animated from 'react-native-reanimated'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg, plural} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
@@ -52,6 +53,9 @@ export function BottomBarWeb() {
   const {_} = useLingui()
   const {hasSession, currentAccount} = useSession()
   const t = useTheme()
+  // Eurosky fork: pad the bottom bar past the iOS home indicator when running
+  // as a standalone PWA (env(safe-area-inset-bottom)); 0 in a browser tab.
+  const insets = useSafeAreaInsets()
   const footerMinimalShellTransform = useMinimalShellFooterTransform()
   const {requestSwitchToAccount} = useLoggedOutViewControls()
   const closeAllActiveElements = useCloseAllActiveElements()
@@ -90,6 +94,7 @@ export function BottomBarWeb() {
           styles.bottomBar,
           styles.bottomBarWeb,
           t.atoms.bg,
+          {paddingBottom: insets.bottom},
           hideBorder
             ? {borderColor: t.atoms.bg.backgroundColor}
             : t.atoms.border_contrast_low,