Visual alignment of tab bar and headers

src/components/ProgressGuide/FollowDialog.tsx

@@ -1,5 +1,12 @@
 import {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
-import {ScrollView, TextInput, useWindowDimensions, View} from 'react-native'
+import {
+  ScrollView,
+  type StyleProp,
+  TextInput,
+  useWindowDimensions,
+  View,
+  type ViewStyle,
+} from 'react-native'
 import Animated, {
   LayoutAnimationConfig,
   LinearTransition,
@@ -453,6 +460,7 @@ let Tabs = ({
   hasSearchText,
   interestsDisplayNames,
   TabComponent = Tab,
+  contentContainerStyle,
 }: {
   onSelectTab: (tab: string) => void
   interests: string[]
@@ -460,6 +468,7 @@ let Tabs = ({
   hasSearchText: boolean
   interestsDisplayNames: Record<string, string>
   TabComponent?: React.ComponentType<React.ComponentProps<typeof Tab>>
+  contentContainerStyle?: StyleProp<ViewStyle>
 }): React.ReactNode => {
   const listRef = useRef<ScrollView>(null)
   const [scrollX, setScrollX] = useState(0)
@@ -520,7 +529,7 @@ let Tabs = ({
     <ScrollView
       ref={listRef}
       horizontal
-      contentContainerStyle={[a.gap_sm, a.px_lg]}
+      contentContainerStyle={[a.gap_sm, a.px_lg, contentContainerStyle]}
       showsHorizontalScrollIndicator={false}
       decelerationRate="fast"
       snapToOffsets={

src/screens/Search/components/ModuleHeader.tsx

@@ -6,14 +6,7 @@ import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {makeCustomFeedLink} from '#/lib/routes/links'
 import {logger} from '#/logger'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {
-  atoms as a,
-  native,
-  useGutters,
-  useTheme,
-  type ViewStyleProp,
-  web,
-} from '#/alf'
+import {atoms as a, native, useTheme, type ViewStyleProp, web} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
 import {sizes as iconSizes} from '#/components/icons/common'
@@ -27,13 +20,12 @@ export function Container({
   headerHeight,
 }: {children: React.ReactNode; headerHeight?: number} & ViewStyleProp) {
   const t = useTheme()
-  const gutters = useGutters([0, 'base'])
   return (
     <View
       style={[
-        gutters,
         a.flex_row,
         a.align_center,
+        a.px_lg,
         a.pt_2xl,
         a.pb_md,
         a.gap_sm,

src/screens/Search/modules/ExploreSuggestedAccounts.tsx

@@ -87,6 +87,12 @@ export function SuggestedAccountsTabBar({
           ...interestsDisplayNames,
         }}
         TabComponent={Tab}
+        contentContainerStyle={[
+          {
+            // visual alignment
+            paddingLeft: a.px_lg.paddingLeft - 2,
+          },
+        ]}
       />
     </BlockDrawerGesture>
   )