set explicit width and overlap leftnav

src/Navigation.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import {JSX} from 'react/jsx-runtime'
-import {View} from 'react-native'
 import {i18n, MessageDescriptor} from '@lingui/core'
 import {msg} from '@lingui/macro'
 import {
@@ -82,7 +81,7 @@ import {LeftNav} from '#/view/shell/desktop/LeftNav'
 import HashtagScreen from '#/screens/Hashtag'
 import {ModerationScreen} from '#/screens/Moderation'
 import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy'
-import {atoms as a, useTheme} from '#/alf'
+import {useTheme} from '#/alf'
 import {router} from '#/routes'
 
 const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
@@ -353,7 +352,7 @@ function TabNavigatorTablet() {
   const tabBar = React.useCallback(() => null, [])
 
   return (
-    <View style={[a.flex_row, a.flex_1]}>
+    <>
       <LeftNav />
       <TabletTab.Navigator
         initialRouteName="HomeTab"
@@ -393,7 +392,7 @@ function TabNavigatorTablet() {
           getComponent={() => SettingsTabNavigator}
         />
       </TabletTab.Navigator>
-    </View>
+    </>
   )
 }
 

src/view/com/home/HomeHeaderLayoutMobile.tsx

@@ -1,8 +1,12 @@
 import React from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {
+  StyleSheet,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
+} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -10,10 +14,9 @@ import {useSetDrawerOpen} from '#/state/shell/drawer-open'
 import {useShellLayout} from '#/state/shell/shell-layout'
 import {HITSLOP_10} from 'lib/constants'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
-import {usePalette} from 'lib/hooks/usePalette'
 import {isNativeTablet, isWeb} from 'platform/detection'
 import {Logo} from '#/view/icons/Logo'
-import {atoms} from '#/alf'
+import {atoms, useTheme} from '#/alf'
 import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette'
 import {Link as Link2} from '#/components/Link'
 import {IS_DEV} from '#/env'
@@ -25,11 +28,22 @@ export function HomeHeaderLayoutMobile({
   children: React.ReactNode
   tabBarAnchor: JSX.Element | null | undefined
 }) {
-  const pal = usePalette('default')
   const {_} = useLingui()
   const setDrawerOpen = useSetDrawerOpen()
   const {headerHeight} = useShellLayout()
   const {headerMinimalShellTransform} = useMinimalShellMode()
+  const {width} = useWindowDimensions()
+  const t = useTheme()
+
+  let tabBarTablet
+  if (isNativeTablet && width > 677) {
+    tabBarTablet = {
+      marginLeft: (width - 600) / 2,
+      width: 600,
+      borderLeftWidth: 1,
+      borderRightWidth: 1,
+    }
+  }
 
   const onPressAvi = React.useCallback(() => {
     setDrawerOpen(true)
@@ -37,13 +51,19 @@ export function HomeHeaderLayoutMobile({
 
   return (
     <Animated.View
-      style={[pal.view, pal.border, styles.tabBar, headerMinimalShellTransform]}
+      style={[
+        t.atoms.bg,
+        t.atoms.border_contrast_medium,
+        styles.tabBar,
+        tabBarTablet,
+        headerMinimalShellTransform,
+      ]}
       onLayout={e => {
         headerHeight.value = e.nativeEvent.layout.height
       }}>
-      <View style={[pal.view, styles.topBar]}>
-        {!isNativeTablet ? (
-          <View style={[pal.view, {width: 100}]}>
+      <View style={[t.atoms.bg, styles.topBar]}>
+        <View style={[t.atoms.bg, {width: 100}]}>
+          {!isNativeTablet ? (
             <TouchableOpacity
               testID="viewHeaderDrawerBtn"
               onPress={onPressAvi}
@@ -56,14 +76,11 @@ export function HomeHeaderLayoutMobile({
               <FontAwesomeIcon
                 icon="bars"
                 size={18}
-                color={pal.colors.textLight}
+                color={t.atoms.text_contrast_medium.color}
               />
             </TouchableOpacity>
-          </View>
-        ) : (
-          // subtract width of LeftNav
-          <View style={{width: 100 - 77}} />
-        )}
+          ) : null}
+        </View>
         <View>
           <Logo width={30} />
         </View>
@@ -73,7 +90,7 @@ export function HomeHeaderLayoutMobile({
             atoms.justify_end,
             atoms.align_center,
             atoms.gap_md,
-            pal.view,
+            t.atoms.bg,
             {width: 100},
           ]}>
           {IS_DEV && (
@@ -90,7 +107,7 @@ export function HomeHeaderLayoutMobile({
             accessibilityHint="">
             <FontAwesomeIcon
               icon="sliders"
-              style={pal.textLight as FontAwesomeIconStyle}
+              color={t.atoms.text_contrast_medium.color}
             />
           </Link>
         </View>

src/view/com/pager/PagerWithHeader.tsx

@@ -1,26 +1,30 @@
 import * as React from 'react'
 import {
   LayoutChangeEvent,
+  NativeScrollEvent,
   ScrollView,
   StyleSheet,
+  useWindowDimensions,
   View,
-  NativeScrollEvent,
 } from 'react-native'
 import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
+  AnimatedRef,
   runOnJS,
   runOnUI,
   scrollTo,
-  useAnimatedRef,
-  AnimatedRef,
   SharedValue,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useSharedValue,
 } from 'react-native-reanimated'
-import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
-import {TabBar} from './TabBar'
+
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
-import {ListMethods} from '../util/List'
 import {ScrollProvider} from '#/lib/ScrollContext'
+import {isNativeTablet} from '#/platform/detection'
+import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
+import {useTheme} from '#/alf'
+import {ListMethods} from '../util/List'
+import {TabBar} from './TabBar'
 
 export interface PagerWithHeaderChildParams {
   headerHeight: number
@@ -234,10 +238,24 @@ let PagerTabBar = ({
     ],
   }))
   const headerRef = React.useRef(null)
+  const {width} = useWindowDimensions()
+  const t = useTheme()
+
+  let tabBarTablet
+  if (isNativeTablet && width > 677) {
+    tabBarTablet = {
+      marginLeft: (width - 600) / 2,
+      width: 600,
+      borderLeftWidth: 1,
+      borderRightWidth: 1,
+      ...t.atoms.border_contrast_medium,
+    }
+  }
+
   return (
     <Animated.View
       pointerEvents="box-none"
-      style={[styles.tabBarMobile, headerTransform]}>
+      style={[styles.tabBarMobile, tabBarTablet, headerTransform]}>
       <View ref={headerRef} pointerEvents="box-none" collapsable={false}>
         {renderHeader?.()}
         {

src/view/com/util/List.tsx

@@ -3,10 +3,10 @@ import {FlatListProps, RefreshControl, useWindowDimensions} from 'react-native'
 import {runOnJS, useSharedValue} from 'react-native-reanimated'
 
 import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
-import {usePalette} from '#/lib/hooks/usePalette'
 import {useScrollHandlers} from '#/lib/ScrollContext'
 import {isNativeTablet} from '#/platform/detection'
 import {addStyle} from 'lib/styles'
+import {useTheme} from '#/alf'
 import {FlatList_INTERNAL} from './Views'
 
 export type ListMethods = FlatList_INTERNAL
@@ -39,7 +39,7 @@ function ListImpl<ItemT>(
 ) {
   const isScrolledDown = useSharedValue(false)
   const contextScrollHandlers = useScrollHandlers()
-  const pal = usePalette('default')
+  const t = useTheme()
   const {width} = useWindowDimensions()
 
   function handleScrolledDownChange(didScrollDown: boolean) {
@@ -72,8 +72,8 @@ function ListImpl<ItemT>(
       <RefreshControl
         refreshing={refreshing ?? false}
         onRefresh={onRefresh}
-        tintColor={pal.colors.text}
-        titleColor={pal.colors.text}
+        tintColor={t.atoms.text.color}
+        titleColor={t.atoms.text.color}
         progressViewOffset={headerOffset}
       />
     )
@@ -89,11 +89,11 @@ function ListImpl<ItemT>(
 
   if (isNativeTablet && width > 677) {
     contentContainerStyle = addStyle(contentContainerStyle, {
-      marginLeft: (width - 600) / 2 - 77,
-      marginRight: (width - 600) / 2,
+      marginLeft: (width - 600) / 2,
+      width: 600,
       borderLeftWidth: 1,
       borderRightWidth: 1,
-      ...pal.border,
+      ...t.atoms.border_contrast_medium,
     })
   }
 

src/view/shell/desktop/LeftNav.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
@@ -274,6 +275,7 @@ export function LeftNav() {
   const {_} = useLingui()
   const {isDesktop, isTablet} = useWebMediaQueries()
   const numUnread = useUnreadNotifications()
+  const {top} = useSafeAreaInsets()
 
   if (!hasSession && !isDesktop) {
     return null
@@ -283,7 +285,7 @@ export function LeftNav() {
     <View
       style={[
         styles.leftNav,
-        isTablet && styles.leftNavTablet,
+        isTablet && [styles.leftNavTablet, {top}],
         pal.view,
         pal.border,
       ]}>
@@ -461,13 +463,13 @@ const styles = StyleSheet.create({
         paddingTop: 12,
       },
   leftNavTablet: {
-    top: 0,
     left: 0,
-    right: 'auto',
     borderRightWidth: 1,
     height: '100%',
     width: 76,
     alignItems: 'center',
+    position: 'absolute',
+    zIndex: 1,
   },
 
   profileCard: {