fix tablet

This commit is contained in:
Samuel Newman
2025-01-08 14:57:20 +00:00
parent ecb46c0435
commit 6b95d8c6ad
+42 -39
View File
@@ -106,9 +106,7 @@ function ProfileCard() {
<Menu.Root> <Menu.Root>
<Menu.Trigger label={_(msg`Switch accounts`)}> <Menu.Trigger label={_(msg`Switch accounts`)}>
{({props, state}) => { {({props, state}) => {
const active = const active = state.activated
gtTablet && // desktop only
state.activated
return ( return (
<Button <Button
label={props.accessibilityLabel} label={props.accessibilityLabel}
@@ -133,7 +131,10 @@ function ProfileCard() {
a.relative, a.relative,
a.z_10, a.z_10,
active && { active && {
transform: [{scale: 2 / 3}, {translateX: -22}], transform: [
{scale: gtTablet ? 2 / 3 : 0.8},
{translateX: gtTablet ? -22 : 0},
],
}, },
]}> ]}>
<UserAvatar <UserAvatar
@@ -142,42 +143,44 @@ function ProfileCard() {
type={profile?.associated?.labeler ? 'labeler' : 'user'} type={profile?.associated?.labeler ? 'labeler' : 'user'}
/> />
</View> </View>
<View
style={[
a.flex_1,
a.transition_opacity,
{
marginLeft: tokens.space.xl * -1,
opacity: active ? 1 : 0,
},
]}>
<Text
style={[a.font_heavy, a.text_sm, a.leading_snug]}
numberOfLines={1}>
{sanitizeDisplayName(
profile.displayName || profile.handle,
)}
</Text>
<Text
style={[
a.text_xs,
a.leading_snug,
t.atoms.text_contrast_medium,
]}
numberOfLines={1}>
{sanitizeHandle(profile.handle, '@')}
</Text>
</View>
{gtTablet && ( {gtTablet && (
<EllipsisIcon <>
aria-hidden={true} <View
style={[ style={[
t.atoms.text_contrast_medium, a.flex_1,
a.transition_opacity, a.transition_opacity,
{opacity: active ? 1 : 0}, {
]} marginLeft: tokens.space.xl * -1,
size="sm" opacity: active ? 1 : 0,
/> },
]}>
<Text
style={[a.font_heavy, a.text_sm, a.leading_snug]}
numberOfLines={1}>
{sanitizeDisplayName(
profile.displayName || profile.handle,
)}
</Text>
<Text
style={[
a.text_xs,
a.leading_snug,
t.atoms.text_contrast_medium,
]}
numberOfLines={1}>
{sanitizeHandle(profile.handle, '@')}
</Text>
</View>
<EllipsisIcon
aria-hidden={true}
style={[
t.atoms.text_contrast_medium,
a.transition_opacity,
{opacity: active ? 1 : 0},
]}
size="sm"
/>
</>
)} )}
</Button> </Button>
) )