Fix web Home header (#7086)

* Fix header disappearing on web * Make border nicer
bluesky-social · Dec 12, 2024 · add7a91 · add7a91
1 parent 8a790cd
commit add7a91
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 14 deletions.
diff --git a/src/components/hooks/useHeaderOffset.ts b/src/components/hooks/useHeaderOffset.ts
@@ -8,8 +8,8 @@ export function useHeaderOffset() {
   if (isDesktop || isTablet) {
     return 0
   }
-  const navBarHeight = 42
-  const tabBarPad = 10 + 10 + 6 // padding + arbitrary
+  const navBarHeight = 52
+  const tabBarPad = 10 + 10 + 3 // padding + border
   const normalLineHeight = 20 // matches tab bar
   const tabBarText = normalLineHeight * fontScale
   return navBarHeight + tabBarPad + tabBarText

diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx
@@ -1,10 +1,8 @@
 import React from 'react'
 import {View} from 'react-native'
-import Animated from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform'
 import {useKawaiiMode} from '#/state/preferences/kawaii'
 import {useSession} from '#/state/session'
 import {useShellLayout} from '#/state/shell/shell-layout'
@@ -36,7 +34,6 @@ function HomeHeaderLayoutDesktopAndTablet({
   tabBarAnchor: JSX.Element | null | undefined
 }) {
   const t = useTheme()
-  const headerMinimalShellTransform = useMinimalShellHeaderTransform()
   const {headerHeight} = useShellLayout()
   const {hasSession} = useSession()
   const {_} = useLingui()
@@ -69,14 +66,11 @@ function HomeHeaderLayoutDesktopAndTablet({
       )}
       {tabBarAnchor}
       <Layout.Center
-        style={[a.sticky, a.z_10, a.align_center, t.atoms.bg, {top: 0}]}>
-        <Animated.View
-          onLayout={e => {
-            headerHeight.set(e.nativeEvent.layout.height)
-          }}
-          style={[headerMinimalShellTransform]}>
-          {children}
-        </Animated.View>
+        style={[a.sticky, a.z_10, a.align_center, t.atoms.bg, {top: 0}]}
+        onLayout={e => {
+          headerHeight.set(e.nativeEvent.layout.height)
+        }}>
+        {children}
       </Layout.Center>
     </>
   )

diff --git a/src/view/com/pager/TabBar.web.tsx b/src/view/com/pager/TabBar.web.tsx
@@ -199,7 +199,7 @@ const mobileStyles = StyleSheet.create({
     textAlign: 'center',
     minWidth: 45,
     paddingBottom: 10,
-    borderBottomWidth: 2,
+    borderBottomWidth: 3,
     borderBottomColor: 'transparent',
   },
   outerBottomBorder: {