fix(ui): correct avatar decoration position in profile modal
AvatarPresence had position:absolute via UserAvatarContainer, which made it position relative to the AvatarDecoration wrapper (a new stacking context) instead of the hero container, shifting the decoration image one avatar-width to the left. Fix: apply UserAvatarContainer to an outer div so AvatarDecoration sits inside the absolute-positioned slot, not the other way around. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -48,9 +48,9 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className={css.UserHeroAvatarContainer}>
|
<div className={css.UserHeroAvatarContainer}>
|
||||||
|
<div className={css.UserAvatarContainer}>
|
||||||
<AvatarDecoration userId={userId} inset={20}>
|
<AvatarDecoration userId={userId} inset={20}>
|
||||||
<AvatarPresence
|
<AvatarPresence
|
||||||
className={css.UserAvatarContainer}
|
|
||||||
badge={
|
badge={
|
||||||
presence && <PresenceBadge presence={presence.presence} status={presence.status} />
|
presence && <PresenceBadge presence={presence.presence} status={presence.status} />
|
||||||
}
|
}
|
||||||
@@ -71,6 +71,7 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
|
|||||||
</Avatar>
|
</Avatar>
|
||||||
</AvatarPresence>
|
</AvatarPresence>
|
||||||
</AvatarDecoration>
|
</AvatarDecoration>
|
||||||
|
</div>
|
||||||
{viewAvatar && (
|
{viewAvatar && (
|
||||||
<Overlay open backdrop={<OverlayBackdrop />}>
|
<Overlay open backdrop={<OverlayBackdrop />}>
|
||||||
<OverlayCenter>
|
<OverlayCenter>
|
||||||
|
|||||||
Reference in New Issue
Block a user