Desktop styling fixes

src/view/com/feeds/SavedFeeds.tsx

@@ -1,10 +1,10 @@
 import React, {useEffect, useCallback} from 'react'
-import {FlatList, RefreshControl, StyleSheet, View} from 'react-native'
+import {RefreshControl, StyleSheet, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {usePalette} from 'lib/hooks/usePalette'
 import {observer} from 'mobx-react-lite'
 import {useStores} from 'state/index'
-import {CenteredView} from 'view/com/util/Views'
+import {FlatList} from 'view/com/util/Views'
 import {Text} from 'view/com/util/text/Text'
 import {isDesktopWeb} from 'platform/detection'
 import {s} from 'lib/styles'
@@ -65,7 +65,6 @@ export const SavedFeeds = observer(
     )
 
     return (
-      <CenteredView style={[s.flex1]}>
       <FlatList
         style={[!isDesktopWeb && s.flex1, {paddingTop: headerOffset}]}
         data={store.me.savedFeeds.feeds}
@@ -89,7 +88,6 @@ export const SavedFeeds = observer(
         // @ts-ignore our .web version only -prf
         desktopFixedHeight
       />
-      </CenteredView>
     )
   },
 )

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

@@ -28,7 +28,12 @@ const FeedsTabBarDesktop = observer(
   ) => {
     const store = useStores()
     const items = useMemo(
-      () => ['Following', "What's hot", ...store.me.savedFeeds.pinnedFeedNames],
+      () => [
+        'Following',
+        "What's hot",
+        ...store.me.savedFeeds.pinnedFeedNames,
+        'My feeds',
+      ],
       [store.me.savedFeeds.pinnedFeedNames],
     )
     const pal = usePalette('default')

src/view/com/pager/TabBar.tsx

@@ -107,11 +107,12 @@ const styles = isDesktopWeb
   ? StyleSheet.create({
       outer: {
         flexDirection: 'row',
-        paddingHorizontal: 18,
+        width: 598,
+        paddingHorizontal: 14,
       },
       item: {
         paddingTop: 14,
-        paddingBottom: 16,
+        paddingBottom: 12,
         paddingHorizontal: 12,
         borderBottomWidth: 3,
         borderBottomColor: 'transparent',

src/view/com/util/ViewHeader.tsx

@@ -20,12 +20,14 @@ export const ViewHeader = observer(function ({
   canGoBack,
   hideOnScroll,
   showOnDesktop,
+  showBorder,
   renderButton,
 }: {
   title: string
   canGoBack?: boolean
   hideOnScroll?: boolean
   showOnDesktop?: boolean
+  showBorder?: boolean
   renderButton?: () => JSX.Element
 }) {
   const pal = usePalette('default')
@@ -57,7 +59,7 @@ export const ViewHeader = observer(function ({
     }
 
     return (
-      <Container hideOnScroll={hideOnScroll || false}>
+      <Container hideOnScroll={hideOnScroll || false} showBorder={showBorder}>
         <TouchableOpacity
           testID="viewHeaderDrawerBtn"
           onPress={canGoBack ? onPressBack : onPressMenu}
@@ -115,9 +117,11 @@ const Container = observer(
   ({
     children,
     hideOnScroll,
+    showBorder,
   }: {
     children: React.ReactNode
     hideOnScroll: boolean
+    showBorder: boolean
   }) => {
     const store = useStores()
     const pal = usePalette('default')
@@ -145,11 +149,28 @@ const Container = observer(
     }
 
     if (!hideOnScroll) {
-      return <View style={[styles.header, pal.view]}>{children}</View>
+      return (
+        <View
+          style={[
+            styles.header,
+            pal.view,
+            pal.border,
+            showBorder && styles.border,
+          ]}>
+          {children}
+        </View>
+      )
     }
     return (
       <Animated.View
-        style={[styles.header, pal.view, styles.headerFloating, transform]}>
+        style={[
+          styles.header,
+          pal.view,
+          pal.border,
+          styles.headerFloating,
+          transform,
+          showBorder && styles.border,
+        ]}>
         {children}
       </Animated.View>
     )
@@ -172,6 +193,9 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     paddingVertical: 12,
   },
+  border: {
+    borderBottomWidth: 1,
+  },
 
   titleContainer: {
     marginLeft: 'auto',

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

@@ -126,5 +126,6 @@ const styles = StyleSheet.create({
   },
   fixedHeight: {
     height: '100vh',
+    scrollbarGutter: 'stable both-edges',
   },
 })

src/view/screens/SavedFeeds.tsx

@@ -71,8 +71,17 @@ export const SavedFeeds = withAuthRequired(
     }
 
     return (
-      <CenteredView style={[s.flex1]}>
-        <ViewHeader title="Edit My Feeds" showOnDesktop />
+      <CenteredView
+        style={[
+          s.hContentRegion,
+          pal.border,
+          isDesktopWeb && styles.desktopContainer,
+        ]}>
+        <ViewHeader
+          title="Edit My Feeds"
+          showOnDesktop
+          showBorder={!isDesktopWeb}
+        />
         <DraggableFlatList
           containerStyle={[!isDesktopWeb && s.flex1]}
           data={[...savedFeeds.pinned, ...savedFeeds.unpinned]} // make a copy so this FlatList re-renders when pinned changes
@@ -92,8 +101,6 @@ export const SavedFeeds = withAuthRequired(
           ListEmptyComponent={_ListEmptyComponent}
           extraData={savedFeeds.isLoading}
           onDragEnd={({data}) => savedFeeds.reorderPinnedFeeds(data)}
-          // @ts-ignore our .web version only -prf
-          desktopFixedHeight
         />
       </CenteredView>
     )
@@ -126,8 +133,8 @@ const ListItem = observer(
                   }}>
                   <FontAwesomeIcon
                     icon="arrow-up"
-                    size={20}
-                    style={[s.mr10, pal.text, styles.webArrowUpButton]}
+                    size={12}
+                    style={[pal.text, styles.webArrowUpButton]}
                   />
                 </TouchableOpacity>
                 <TouchableOpacity
@@ -137,8 +144,8 @@ const ListItem = observer(
                   }}>
                   <FontAwesomeIcon
                     icon="arrow-down"
-                    size={20}
-                    style={[s.mr10, pal.text]}
+                    size={12}
+                    style={[pal.text]}
                   />
                 </TouchableOpacity>
               </View>
@@ -173,6 +180,11 @@ const ListItem = observer(
 )
 
 const styles = StyleSheet.create({
+  desktopContainer: {
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    minHeight: '100vh',
+  },
   footer: {
     paddingVertical: 20,
   },
@@ -187,10 +199,11 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
-    borderTopWidth: 1,
+    borderBottomWidth: 1,
     paddingRight: 16,
   },
   webArrowButtonsContainer: {
+    paddingLeft: 16,
     flexDirection: 'column',
     justifyContent: 'space-around',
   },