fix hashtag screen side borders (#4983)

bluesky-social · Aug 29, 2024 · 497aacf · 497aacf
1 parent 69e896c
commit 497aacf
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 16 deletions.
diff --git a/src/components/Lists.tsx b/src/components/Lists.tsx
@@ -178,7 +178,7 @@ let ListMaybePlaceholder = ({
     return (
       <CenteredView
         style={[
-          a.flex_1,
+          a.h_full_vh,
           a.align_center,
           !gtMobile ? a.justify_between : a.gap_5xl,
           t.atoms.border_contrast_low,

diff --git a/src/screens/Hashtag.tsx b/src/screens/Hashtag.tsx
@@ -1,12 +1,11 @@
 import React from 'react'
-import {ListRenderItemInfo, Pressable, StyleSheet, View} from 'react-native'
+import {ListRenderItemInfo, Pressable, View} from 'react-native'
 import {PostView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
-import {usePalette} from '#/lib/hooks/usePalette'
 import {HITSLOP_10} from 'lib/constants'
 import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
 import {CommonNavigatorParams} from 'lib/routes/types'
@@ -39,7 +38,6 @@ export default function HashtagScreen({
 }: NativeStackScreenProps<CommonNavigatorParams, 'Hashtag'>) {
   const {tag, author} = route.params
   const {_} = useLingui()
-  const pal = usePalette('default')
 
   const fullTag = React.useMemo(() => {
     return `#${decodeURIComponent(tag)}`
@@ -111,7 +109,7 @@ export default function HashtagScreen({
 
   return (
     <>
-      <CenteredView sideBorders style={[pal.border, pal.view]}>
+      <CenteredView sideBorders={true}>
         <ViewHeader
           showOnDesktop
           title={headerTitle}
@@ -138,8 +136,17 @@ export default function HashtagScreen({
         onPageSelected={onPageSelected}
         renderTabBar={props => (
           <CenteredView
-            sideBorders
-            style={[pal.border, pal.view, styles.tabBarContainer]}>
+            sideBorders={true}
+            // @ts-ignore web only
+            style={
+              isWeb
+                ? {
+                    position: isWeb ? 'sticky' : '',
+                    top: 0,
+                    zIndex: 1,
+                  }
+                : undefined
+            }>
             <TabBar items={sections.map(section => section.title)} {...props} />
           </CenteredView>
         )}
@@ -234,12 +241,3 @@ function HashtagScreenTab({
     </>
   )
 }
-
-const styles = StyleSheet.create({
-  tabBarContainer: {
-    // @ts-ignore web only
-    position: isWeb ? 'sticky' : '',
-    top: 0,
-    zIndex: 1,
-  },
-})