+3 -3

src/components/AvatarStack.tsx

··· 19 19 numPending?: number 20 20 backgroundColor?: string 21 21 }) { 22 22 - const halfSize = size / 2 22 22 + const translation = size / 3 // overlap by 1/3 23 23 const t = useTheme() 24 24 const moderationOpts = useModerationOpts() 25 25 ··· 43 43 a.flex_row, 44 44 a.align_center, 45 45 a.relative, 46 46 - {width: size + (items.length - 1) * halfSize}, 46 46 + {width: size + (items.length - 1) * (size - translation)}, 47 47 ]}> 48 48 {items.map((item, i) => ( 49 49 <View ··· 54 54 { 55 55 width: size, 56 56 height: size, 57 57 - left: i * -halfSize, 57 57 + left: i * -translation, 58 58 borderWidth: 1, 59 59 borderColor: backgroundColor ?? t.atoms.bg.backgroundColor, 60 60 borderRadius: 999,

+11 -2

src/components/ProgressGuide/FollowDialog.tsx

··· 1 1 import {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react' 2 2 - import {ScrollView, TextInput, useWindowDimensions, View} from 'react-native' 2 2 + import { 3 3 + ScrollView, 4 4 + type StyleProp, 5 5 + TextInput, 6 6 + useWindowDimensions, 7 7 + View, 8 8 + type ViewStyle, 9 9 + } from 'react-native' 3 10 import Animated, { 4 11 LayoutAnimationConfig, 5 12 LinearTransition, ··· 453 460 hasSearchText, 454 461 interestsDisplayNames, 455 462 TabComponent = Tab, 463 463 + contentContainerStyle, 456 464 }: { 457 465 onSelectTab: (tab: string) => void 458 466 interests: string[] ··· 460 468 hasSearchText: boolean 461 469 interestsDisplayNames: Record<string, string> 462 470 TabComponent?: React.ComponentType<React.ComponentProps<typeof Tab>> 471 471 + contentContainerStyle?: StyleProp<ViewStyle> 463 472 }): React.ReactNode => { 464 473 const listRef = useRef<ScrollView>(null) 465 474 const [scrollX, setScrollX] = useState(0) ··· 520 529 <ScrollView 521 530 ref={listRef} 522 531 horizontal 523 523 - contentContainerStyle={[a.gap_sm, a.px_lg]} 532 532 + contentContainerStyle={[a.gap_sm, a.px_lg, contentContainerStyle]} 524 533 showsHorizontalScrollIndicator={false} 525 534 decelerationRate="fast" 526 535 snapToOffsets={

+4 -1

src/screens/Search/Explore.tsx

··· 45 45 import * as FeedCard from '#/components/FeedCard' 46 46 import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon} from '#/components/icons/Chevron' 47 47 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' 48 48 + import {type Props as IcoProps} from '#/components/icons/common' 48 49 import {type Props as SVGIconProps} from '#/components/icons/common' 49 50 import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle' 50 51 import {StarterPack} from '#/components/icons/StarterPack' ··· 110 111 key: string 111 112 title: string 112 113 icon: React.ComponentType<SVGIconProps> 114 114 + iconSize?: IcoProps['size'] 113 115 searchButton?: { 114 116 label: string 115 117 metricsTag: MetricEvents['explore:module:searchButtonPress']['module'] ··· 461 463 key: 'suggested-starterPacks-header', 462 464 title: _(msg`Starter Packs`), 463 465 icon: StarterPack, 466 466 + iconSize: 'xl', 464 467 }) 465 468 466 469 if (isLoadingSuggestedSPs) { ··· 562 565 case 'header': { 563 566 return ( 564 567 <ModuleHeader.Container> 565 565 - <ModuleHeader.Icon icon={item.icon} /> 568 568 + <ModuleHeader.Icon icon={item.icon} size={item.iconSize} /> 566 569 <ModuleHeader.TitleText>{item.title}</ModuleHeader.TitleText> 567 570 {item.searchButton && ( 568 571 <ModuleHeader.SearchButton

+1 -1

src/screens/Search/Shell.tsx

··· 318 318 </Layout.Header.Outer> 319 319 </View> 320 320 )} 321 321 - <View style={[a.px_md, a.pt_sm, a.pb_sm, a.overflow_hidden]}> 321 321 + <View style={[a.px_lg, a.pt_sm, a.pb_sm, a.overflow_hidden]}> 322 322 <View style={[a.gap_sm]}> 323 323 <View style={[a.w_full, a.flex_row, a.align_stretch, a.gap_xs]}> 324 324 <View style={[a.flex_1]}>

+2 -10

src/screens/Search/components/ModuleHeader.tsx

··· 6 6 import {makeCustomFeedLink} from '#/lib/routes/links' 7 7 import {logger} from '#/logger' 8 8 import {UserAvatar} from '#/view/com/util/UserAvatar' 9 9 - import { 10 10 - atoms as a, 11 11 - native, 12 12 - useGutters, 13 13 - useTheme, 14 14 - type ViewStyleProp, 15 15 - web, 16 16 - } from '#/alf' 9 9 + import {atoms as a, native, useTheme, type ViewStyleProp, web} from '#/alf' 17 10 import {Button, ButtonIcon} from '#/components/Button' 18 11 import * as FeedCard from '#/components/FeedCard' 19 12 import {sizes as iconSizes} from '#/components/icons/common' ··· 27 20 headerHeight, 28 21 }: {children: React.ReactNode; headerHeight?: number} & ViewStyleProp) { 29 22 const t = useTheme() 30 30 - const gutters = useGutters([0, 'base']) 31 23 return ( 32 24 <View 33 25 style={[ 34 34 - gutters, 35 26 a.flex_row, 36 27 a.align_center, 28 28 + a.px_lg, 37 29 a.pt_2xl, 38 30 a.pb_md, 39 31 a.gap_sm,

+1 -1

src/screens/Search/components/StarterPackCard.tsx

··· 234 234 {computedTotal > 0 ? ( 235 235 <Text 236 236 style={[ 237 237 - gtPhone ? a.text_md : a.text_sm, 237 237 + gtPhone ? a.text_md : a.text_xs, 238 238 a.font_bold, 239 239 a.leading_snug, 240 240 {color: 'white'},

+2 -3

src/screens/Search/modules/ExploreInterestsCard.tsx

··· 6 6 import {Nux, useSaveNux} from '#/state/queries/nuxs' 7 7 import {usePreferencesQuery} from '#/state/queries/preferences' 8 8 import {useInterestsDisplayNames} from '#/screens/Onboarding/state' 9 9 - import {atoms as a, useGutters, useTheme} from '#/alf' 9 9 + import {atoms as a, useTheme} from '#/alf' 10 10 import {Button, ButtonIcon, ButtonText} from '#/components/Button' 11 11 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' 12 12 import {Link} from '#/components/Link' ··· 16 16 export function ExploreInterestsCard() { 17 17 const t = useTheme() 18 18 const {_} = useLingui() 19 19 - const gutters = useGutters([0, 'base']) 20 19 const {data: preferences} = usePreferencesQuery() 21 20 const interestsDisplayNames = useInterestsDisplayNames() 22 21 const {mutateAsync: saveNux} = useSaveNux() ··· 53 52 onConfirm={onConfirmClose} 54 53 /> 55 54 56 56 - <View style={[gutters, a.pt_lg, a.pb_2xs]}> 55 55 + <View style={[a.p_lg, a.pb_2xs]}> 57 56 <View 58 57 style={[ 59 58 a.p_lg,

+6

src/screens/Search/modules/ExploreSuggestedAccounts.tsx

··· 87 87 ...interestsDisplayNames, 88 88 }} 89 89 TabComponent={Tab} 90 90 + contentContainerStyle={[ 91 91 + { 92 92 + // visual alignment 93 93 + paddingLeft: a.px_md.paddingLeft, 94 94 + }, 95 95 + ]} 90 96 /> 91 97 </BlockDrawerGesture> 92 98 )