diff --git a/src/screens/Profile/Header/DisplayName.tsx b/src/screens/Profile/Header/DisplayName.tsx index 684a9fe53b..6bcf4a65a0 100644 --- a/src/screens/Profile/Header/DisplayName.tsx +++ b/src/screens/Profile/Header/DisplayName.tsx @@ -4,7 +4,7 @@ import {type AppBskyActorDefs, type ModerationDecision} from '@atproto/api' import {sanitizeDisplayName} from '#/lib/strings/display-names' import {sanitizeHandle} from '#/lib/strings/handles' import {type Shadow} from '#/state/cache/types' -import {atoms as a, platform, useBreakpoints, useTheme} from '#/alf' +import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {ProfileBadges} from '#/components/ProfileBadges' import {Text} from '#/components/Typography' @@ -18,15 +18,24 @@ export function ProfileHeaderDisplayName({ const t = useTheme() const {gtMobile} = useBreakpoints() + /* + * The badges are a sibling of the name rather than a child of it, because an + * inline view inside a `Text` is measured in SP on Android: the space + * reserved for it is multiplied by the device font scale a second time (once + * by `ProfileBadges` itself, then again by the platform), so the badge + * over-reserves, wraps onto a line of its own and gets painted over the + * handle below. Baseline alignment keeps the badge sitting on the name's + * baseline the way an inline view would. + */ return ( - + @@ -34,10 +43,8 @@ export function ProfileHeaderDisplayName({ profile.displayName || sanitizeHandle(profile.handle), moderation.ui('displayName'), )} - - - + ) }