Move border positioning to FlatList and ScrollView (#509)

* Move border positioning to FlatList and ScrollView

* Fix mobile web tab bar border

src/view/com/pager/FeedsTabBar.web.tsx

@@ -63,11 +63,10 @@ const styles = StyleSheet.create({
     position: 'absolute',
     zIndex: 1,
     left: '50%',
-    width: 640,
+    width: 598,
     top: 0,
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 18,
   },
   tabBarAvi: {
     marginTop: 1,

src/view/com/pager/FeedsTabBarMobile.tsx

@@ -33,7 +33,7 @@ export const FeedsTabBar = observer(
     }, [store])
 
     return (
-      <Animated.View style={[pal.view, styles.tabBar, transform]}>
+      <Animated.View style={[pal.view, pal.border, styles.tabBar, transform]}>
         <TouchableOpacity
           testID="viewHeaderDrawerBtn"
           style={styles.tabBarAvi}
@@ -61,6 +61,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: 18,
+    borderBottomWidth: 1,
   },
   tabBarAvi: {
     marginTop: 1,

src/view/com/util/Views.web.tsx

@@ -23,6 +23,7 @@ import {
   ViewProps,
 } from 'react-native'
 import {addStyle, colors} from 'lib/styles'
+import {usePalette} from 'lib/hooks/usePalette'
 
 export function CenteredView({
   style,
@@ -41,6 +42,7 @@ export const FlatList = React.forwardRef(function <ItemT>(
   }: React.PropsWithChildren<FlatListProps<ItemT>>,
   ref: React.Ref<RNFlatList>,
 ) {
+  const pal = usePalette('default')
   contentContainerStyle = addStyle(
     contentContainerStyle,
     styles.containerScroll,
@@ -61,7 +63,11 @@ export const FlatList = React.forwardRef(function <ItemT>(
   return (
     <RNFlatList
       ref={ref}
-      contentContainerStyle={contentContainerStyle}
+      contentContainerStyle={[
+        contentContainerStyle,
+        pal.border,
+        styles.contentContainer,
+      ]}
       style={style}
       contentOffset={contentOffset}
       {...props}
@@ -73,13 +79,19 @@ export const ScrollView = React.forwardRef(function (
   {contentContainerStyle, ...props}: React.PropsWithChildren<ScrollViewProps>,
   ref: React.Ref<RNScrollView>,
 ) {
+  const pal = usePalette('default')
+
   contentContainerStyle = addStyle(
     contentContainerStyle,
     styles.containerScroll,
   )
   return (
     <RNScrollView
-      contentContainerStyle={contentContainerStyle}
+      contentContainerStyle={[
+        contentContainerStyle,
+        pal.border,
+        styles.contentContainer,
+      ]}
       ref={ref}
       {...props}
     />
@@ -87,6 +99,11 @@ export const ScrollView = React.forwardRef(function (
 })
 
 const styles = StyleSheet.create({
+  contentContainer: {
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    minHeight: '100vh',
+  },
   container: {
     width: '100%',
     maxWidth: 600,
@@ -95,7 +112,6 @@ const styles = StyleSheet.create({
   },
   containerScroll: {
     width: '100%',
-    maxHeight: '100vh',
     maxWidth: 600,
     marginLeft: 'auto',
     marginRight: 'auto',

src/view/shell/index.web.tsx

@@ -14,11 +14,9 @@ import {RoutesContainer, FlatNavigator} from '../../Navigation'
 import {DrawerContent} from './Drawer'
 import {useWebMediaQueries} from '../../lib/hooks/useWebMediaQueries'
 import {BottomBarWeb} from './bottom-bar/BottomBarWeb'
-import {usePalette} from 'lib/hooks/usePalette'
 
 const ShellInner = observer(() => {
   const store = useStores()
-  const pal = usePalette('default')
   const {isDesktop} = useWebMediaQueries()
 
   return (
@@ -32,20 +30,6 @@ const ShellInner = observer(() => {
         <>
           <DesktopLeftNav />
           <DesktopRightNav />
-          <View
-            style={[
-              styles.viewBorder,
-              {borderLeftColor: pal.colors.border},
-              styles.viewBorderLeft,
-            ]}
-          />
-          <View
-            style={[
-              styles.viewBorder,
-              {borderLeftColor: pal.colors.border},
-              styles.viewBorderRight,
-            ]}
-          />
         </>
       )}
       <Composer
@@ -90,18 +74,6 @@ const styles = StyleSheet.create({
   bgDark: {
     backgroundColor: colors.black, // TODO
   },
-  viewBorder: {
-    position: 'absolute',
-    width: 1,
-    height: '100%',
-    borderLeftWidth: 1,
-  },
-  viewBorderLeft: {
-    left: 'calc(50vw - 300px)',
-  },
-  viewBorderRight: {
-    left: 'calc(50vw + 300px)',
-  },
   drawerMask: {
     position: 'absolute',
     width: '100%',