Show a single liker name below the mobile breakpoint

The social proof text truncates on narrow screens when two names plus
"and N others" don't fit. Drop to one name below gtMobile while keeping
the three-avatar face pile.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Eric Bailey
2026-07-14 17:09:11 -05:00
parent f42a325f49
commit 444a989563
@@ -8,7 +8,7 @@ import {sanitizeDisplayName} from '#/lib/strings/display-names'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {useLikedBySampleQuery} from '#/state/queries/post-liked-by'
import {useSession} from '#/state/session'
import {atoms as a, useTheme} from '#/alf'
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {AvatarStack} from '#/components/AvatarStack'
import {InlineLinkText, Link} from '#/components/Link'
import {useFormatPostStatCount} from '#/components/PostControls/util'
@@ -32,6 +32,7 @@ const AVI_SIZE = 20
*/
export function LikesStat({post}: {post: AppBskyFeedDefs.PostView}) {
const t = useTheme()
const {gtMobile} = useBreakpoints()
const {t: l} = useLingui()
const {hasSession, currentAccount} = useSession()
const moderationOpts = useModerationOpts()
@@ -98,8 +99,9 @@ export function LikesStat({post}: {post: AppBskyFeedDefs.PostView}) {
const aviStackProfiles = knownLikersAndModeration
.slice(0, 3)
.map(({actor}) => actor)
const maxNames = gtMobile ? 2 : 1
const names = knownLikersAndModeration
.slice(0, 2)
.slice(0, maxNames)
.map(({actor, moderation}) => {
return {
did: actor.did,