diff --git a/src/components/AvatarStack.tsx b/src/components/AvatarStack.tsx
index a341a20611..ae42a7470b 100644
--- a/src/components/AvatarStack.tsx
+++ b/src/components/AvatarStack.tsx
@@ -19,7 +19,7 @@ export function AvatarStack({
numPending?: number
backgroundColor?: string
}) {
- const halfSize = size / 2
+ const translation = size / 3 // overlap by 1/3
const t = useTheme()
const moderationOpts = useModerationOpts()
@@ -43,7 +43,7 @@ export function AvatarStack({
a.flex_row,
a.align_center,
a.relative,
- {width: size + (items.length - 1) * halfSize},
+ {width: size + (items.length - 1) * (size - translation)},
]}>
{items.map((item, i) => (
void
interests: string[]
@@ -460,6 +468,7 @@ let Tabs = ({
hasSearchText: boolean
interestsDisplayNames: Record
TabComponent?: React.ComponentType>
+ contentContainerStyle?: StyleProp
}): React.ReactNode => {
const listRef = useRef(null)
const [scrollX, setScrollX] = useState(0)
@@ -520,7 +529,7 @@ let Tabs = ({
+ iconSize?: IcoProps['size']
searchButton?: {
label: string
metricsTag: MetricEvents['explore:module:searchButtonPress']['module']
@@ -461,6 +463,7 @@ export function Explore({
key: 'suggested-starterPacks-header',
title: _(msg`Starter Packs`),
icon: StarterPack,
+ iconSize: 'xl',
})
if (isLoadingSuggestedSPs) {
@@ -562,7 +565,7 @@ export function Explore({
case 'header': {
return (
-
+
{item.title}
{item.searchButton && (
)}
-
+
diff --git a/src/screens/Search/components/ModuleHeader.tsx b/src/screens/Search/components/ModuleHeader.tsx
index c965046a64..c6411d1c0d 100644
--- a/src/screens/Search/components/ModuleHeader.tsx
+++ b/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 (
0 ? (
-
+
)