Bluesky app fork with some witchin' additions 💫

Fix web Home header (#7086)

* Fix header disappearing on web

* Make border nicer

authored by danabra.mov and committed by GitHub add7a91d 8a790cdd

Changed files
+8 -14
src
components
view
+2 -2
src/components/hooks/useHeaderOffset.ts
··· 8 8 if (isDesktop || isTablet) { 9 9 return 0 10 10 } 11 - const navBarHeight = 42 12 - const tabBarPad = 10 + 10 + 6 // padding + arbitrary 11 + const navBarHeight = 52 12 + const tabBarPad = 10 + 10 + 3 // padding + border 13 13 const normalLineHeight = 20 // matches tab bar 14 14 const tabBarText = normalLineHeight * fontScale 15 15 return navBarHeight + tabBarPad + tabBarText
+5 -11
src/view/com/home/HomeHeaderLayout.web.tsx
··· 1 1 import React from 'react' 2 2 import {View} from 'react-native' 3 - import Animated from 'react-native-reanimated' 4 3 import {msg} from '@lingui/macro' 5 4 import {useLingui} from '@lingui/react' 6 5 7 - import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform' 8 6 import {useKawaiiMode} from '#/state/preferences/kawaii' 9 7 import {useSession} from '#/state/session' 10 8 import {useShellLayout} from '#/state/shell/shell-layout' ··· 36 34 tabBarAnchor: JSX.Element | null | undefined 37 35 }) { 38 36 const t = useTheme() 39 - const headerMinimalShellTransform = useMinimalShellHeaderTransform() 40 37 const {headerHeight} = useShellLayout() 41 38 const {hasSession} = useSession() 42 39 const {_} = useLingui() ··· 69 66 )} 70 67 {tabBarAnchor} 71 68 <Layout.Center 72 - style={[a.sticky, a.z_10, a.align_center, t.atoms.bg, {top: 0}]}> 73 - <Animated.View 74 - onLayout={e => { 75 - headerHeight.set(e.nativeEvent.layout.height) 76 - }} 77 - style={[headerMinimalShellTransform]}> 78 - {children} 79 - </Animated.View> 69 + style={[a.sticky, a.z_10, a.align_center, t.atoms.bg, {top: 0}]} 70 + onLayout={e => { 71 + headerHeight.set(e.nativeEvent.layout.height) 72 + }}> 73 + {children} 80 74 </Layout.Center> 81 75 </> 82 76 )
+1 -1
src/view/com/pager/TabBar.web.tsx
··· 199 199 textAlign: 'center', 200 200 minWidth: 45, 201 201 paddingBottom: 10, 202 - borderBottomWidth: 2, 202 + borderBottomWidth: 3, 203 203 borderBottomColor: 'transparent', 204 204 }, 205 205 outerBottomBorder: {