Fix anchor text overflow in threads v2 (#8530)

This commit is contained in:
Eric Bailey
2025-06-18 15:41:58 -05:00
committed by GitHub
parent 04a2a227fc
commit 51babe0164
3 changed files with 49 additions and 55 deletions
@@ -74,7 +74,7 @@ export function ProfileHoverCard(props: ProfileHoverCardProps) {
return props.children return props.children
} else { } else {
return ( return (
<View onPointerMove={onPointerMove} style={[a.flex_shrink]}> <View onPointerMove={onPointerMove} style={[a.flex_shrink, props.style]}>
<ProfileHoverCardInner {...props} /> <ProfileHoverCardInner {...props} />
</View> </View>
) )
+4 -2
View File
@@ -1,7 +1,9 @@
import type React from 'react' import type React from 'react'
export type ProfileHoverCardProps = { import {type ViewStyleProp} from '#/alf'
children: React.ReactElement
export type ProfileHoverCardProps = ViewStyleProp & {
children: React.ReactNode
did: string did: string
disable?: boolean disable?: boolean
} }
@@ -311,69 +311,61 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
isRoot && [a.pt_lg], isRoot && [a.pt_lg],
]}> ]}>
<View style={[a.flex_row, a.gap_md, a.pb_md]}> <View style={[a.flex_row, a.gap_md, a.pb_md]}>
<PreviewableUserAvatar <View collapsable={false}>
size={42} <PreviewableUserAvatar
profile={post.author} size={42}
moderation={moderation.ui('avatar')} profile={post.author}
type={post.author.associated?.labeler ? 'labeler' : 'user'} moderation={moderation.ui('avatar')}
live={live} type={post.author.associated?.labeler ? 'labeler' : 'user'}
onBeforePress={onOpenAuthor} live={live}
/> onBeforePress={onOpenAuthor}
<View style={[a.flex_1, a.align_start]}> />
<ProfileHoverCard did={post.author.did}> </View>
<View style={[a.flex_1]}> <Link
to={authorHref}
style={[a.flex_1]}
label={sanitizeDisplayName(
post.author.displayName || sanitizeHandle(post.author.handle),
moderation.ui('displayName'),
)}
onPress={onOpenAuthor}>
<View style={[a.flex_1, a.align_start]}>
<ProfileHoverCard did={post.author.did} style={[a.w_full]}>
<View style={[a.flex_row, a.align_center]}> <View style={[a.flex_row, a.align_center]}>
<Link <Text
to={authorHref} emoji
style={[a.flex_shrink]} style={[
label={sanitizeDisplayName( a.flex_shrink,
a.text_lg,
a.font_bold,
a.leading_snug,
]}
numberOfLines={1}>
{sanitizeDisplayName(
post.author.displayName || post.author.displayName ||
sanitizeHandle(post.author.handle), sanitizeHandle(post.author.handle),
moderation.ui('displayName'), moderation.ui('displayName'),
)} )}
onPress={onOpenAuthor}> </Text>
<Text
emoji
style={[
a.text_lg,
a.font_bold,
a.leading_snug,
a.self_start,
]}
numberOfLines={1}>
{sanitizeDisplayName(
post.author.displayName ||
sanitizeHandle(post.author.handle),
moderation.ui('displayName'),
)}
</Text>
</Link>
<View style={[{paddingLeft: 3, top: -1}]}> <View style={[{paddingLeft: 3, top: -1}]}>
<VerificationCheckButton profile={authorShadow} size="md" /> <VerificationCheckButton profile={authorShadow} size="md" />
</View> </View>
</View> </View>
<View style={[a.align_start]}> <Text
<Link style={[
style={[a.flex_shrink]} a.text_md,
to={authorHref} a.leading_snug,
label={sanitizeHandle(post.author.handle, '@')}> t.atoms.text_contrast_medium,
<Text ]}
style={[ numberOfLines={1}>
a.text_md, {sanitizeHandle(post.author.handle, '@')}
a.leading_snug, </Text>
t.atoms.text_contrast_medium, </ProfileHoverCard>
]} </View>
numberOfLines={1}> </Link>
{sanitizeHandle(post.author.handle, '@')}
</Text>
</Link>
</View>
</View>
</ProfileHoverCard>
</View>
{showFollowButton && ( {showFollowButton && (
<View> <View collapsable={false}>
<PostThreadFollowBtn did={post.author.did} /> <PostThreadFollowBtn did={post.author.did} />
</View> </View>
)} )}