From 444a9895634f8f41cd64079649ec2c3c8e74d388 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Tue, 14 Jul 2026 17:09:11 -0500 Subject: [PATCH] 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) --- src/screens/PostThread/components/LikesStat.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/screens/PostThread/components/LikesStat.tsx b/src/screens/PostThread/components/LikesStat.tsx index 7b6182d3c0..f98e12ef11 100644 --- a/src/screens/PostThread/components/LikesStat.tsx +++ b/src/screens/PostThread/components/LikesStat.tsx @@ -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,