Fix horizontal padding of tab within profile header (#3924)

Co-authored-by: Hailey <me@haileyok.com>

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

@@ -1,11 +1,12 @@
 import * as React from 'react'
 import {FlatList, ScrollView, StyleSheet, View} from 'react-native'
 import {useAnimatedRef} from 'react-native-reanimated'
-import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
-import {TabBar} from './TabBar'
+
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {ListMethods} from '../util/List'
+import {TabBar} from './TabBar'
 
 export interface PagerWithHeaderChildParams {
   headerHeight: number
@@ -184,8 +185,7 @@ function PagerItem({
 
 const styles = StyleSheet.create({
   headerContainerDesktop: {
-    marginLeft: 'auto',
-    marginRight: 'auto',
+    marginHorizontal: 'auto',
     width: 600,
     borderLeftWidth: 1,
     borderRightWidth: 1,
@@ -198,15 +198,14 @@ const styles = StyleSheet.create({
     zIndex: 1,
   },
   tabBarContainerDesktop: {
-    marginLeft: 'auto',
-    marginRight: 'auto',
+    marginHorizontal: 'auto',
+    paddingHorizontal: 2,
     width: 600,
     borderLeftWidth: 1,
     borderRightWidth: 1,
   },
   tabBarContainerMobile: {
-    paddingLeft: 14,
-    paddingRight: 14,
+    paddingHorizontal: 0,
   },
   loadingHeader: {
     borderColor: 'transparent',

src/view/com/pager/TabBar.tsx

@@ -191,7 +191,7 @@ const mobileStyles = StyleSheet.create({
   },
   contentContainer: {
     backgroundColor: 'transparent',
-    paddingHorizontal: 8,
+    paddingHorizontal: 6,
   },
   item: {
     paddingTop: 10,