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:
@@ -8,7 +8,7 @@ import {sanitizeDisplayName} from '#/lib/strings/display-names'
|
|||||||
import {useModerationOpts} from '#/state/preferences/moderation-opts'
|
import {useModerationOpts} from '#/state/preferences/moderation-opts'
|
||||||
import {useLikedBySampleQuery} from '#/state/queries/post-liked-by'
|
import {useLikedBySampleQuery} from '#/state/queries/post-liked-by'
|
||||||
import {useSession} from '#/state/session'
|
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 {AvatarStack} from '#/components/AvatarStack'
|
||||||
import {InlineLinkText, Link} from '#/components/Link'
|
import {InlineLinkText, Link} from '#/components/Link'
|
||||||
import {useFormatPostStatCount} from '#/components/PostControls/util'
|
import {useFormatPostStatCount} from '#/components/PostControls/util'
|
||||||
@@ -32,6 +32,7 @@ const AVI_SIZE = 20
|
|||||||
*/
|
*/
|
||||||
export function LikesStat({post}: {post: AppBskyFeedDefs.PostView}) {
|
export function LikesStat({post}: {post: AppBskyFeedDefs.PostView}) {
|
||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
|
const {gtMobile} = useBreakpoints()
|
||||||
const {t: l} = useLingui()
|
const {t: l} = useLingui()
|
||||||
const {hasSession, currentAccount} = useSession()
|
const {hasSession, currentAccount} = useSession()
|
||||||
const moderationOpts = useModerationOpts()
|
const moderationOpts = useModerationOpts()
|
||||||
@@ -98,8 +99,9 @@ export function LikesStat({post}: {post: AppBskyFeedDefs.PostView}) {
|
|||||||
const aviStackProfiles = knownLikersAndModeration
|
const aviStackProfiles = knownLikersAndModeration
|
||||||
.slice(0, 3)
|
.slice(0, 3)
|
||||||
.map(({actor}) => actor)
|
.map(({actor}) => actor)
|
||||||
|
const maxNames = gtMobile ? 2 : 1
|
||||||
const names = knownLikersAndModeration
|
const names = knownLikersAndModeration
|
||||||
.slice(0, 2)
|
.slice(0, maxNames)
|
||||||
.map(({actor, moderation}) => {
|
.map(({actor, moderation}) => {
|
||||||
return {
|
return {
|
||||||
did: actor.did,
|
did: actor.did,
|
||||||
|
|||||||
Reference in New Issue
Block a user