From 97d808585a94e2507e825c86a611ba93a35fb007 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sun, 14 Jun 2026 17:54:16 -0400
Subject: [PATCH] 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>
---
 src/app/components/user-profile/UserHero.tsx | 45 ++++++++++----------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index 594e4aae9..a7a7888a0 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -48,29 +48,30 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
         )}
       </div>
       <div className={css.UserHeroAvatarContainer}>
-        <AvatarDecoration userId={userId} inset={20}>
-          <AvatarPresence
-            className={css.UserAvatarContainer}
-            badge={
-              presence && <PresenceBadge presence={presence.presence} status={presence.status} />
-            }
-          >
-            <Avatar
-              as={avatarUrl ? 'button' : 'div'}
-              onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
-              className={css.UserHeroAvatar}
-              size="500"
+        <div className={css.UserAvatarContainer}>
+          <AvatarDecoration userId={userId} inset={20}>
+            <AvatarPresence
+              badge={
+                presence && <PresenceBadge presence={presence.presence} status={presence.status} />
+              }
             >
-              <UserAvatar
-                className={css.UserHeroAvatarImg}
-                userId={userId}
-                src={avatarUrl}
-                alt={userId}
-                renderFallback={() => <Icon size="500" src={Icons.User} filled />}
-              />
-            </Avatar>
-          </AvatarPresence>
-        </AvatarDecoration>
+              <Avatar
+                as={avatarUrl ? 'button' : 'div'}
+                onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
+                className={css.UserHeroAvatar}
+                size="500"
+              >
+                <UserAvatar
+                  className={css.UserHeroAvatarImg}
+                  userId={userId}
+                  src={avatarUrl}
+                  alt={userId}
+                  renderFallback={() => <Icon size="500" src={Icons.User} filled />}
+                />
+              </Avatar>
+            </AvatarPresence>
+          </AvatarDecoration>
+        </div>
         {viewAvatar && (
           <Overlay open backdrop={<OverlayBackdrop />}>
             <OverlayCenter>