Show avatar decoration in user profile modal

Wraps the profile hero avatar with AvatarDecoration so a user's chosen
decoration ring is visible when viewing their profile panel. Added an
optional `inset` prop to AvatarDecoration so the profile hero can use
a larger bleed (20px) proportional to the bigger avatar size.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/components/avatar-decoration/AvatarDecoration.tsx

@@ -2,17 +2,15 @@ import React from 'react';
 import { useAvatarDecoration } from '../../hooks/useAvatarDecoration';
 import { decorationUrl } from '../../features/lotus/avatarDecorations';
 
-// How far the decoration image extends beyond the avatar on each side (px).
-// The APNG files are 256×256 with a transparent center. At this extension
-// the center hole lines up naturally with the avatar beneath it.
-const INSET = 8;
+const DEFAULT_INSET = 8;
 
 type AvatarDecorationProps = {
   userId: string;
   children: React.ReactNode;
+  inset?: number;
 };
 
-export function AvatarDecoration({ userId, children }: AvatarDecorationProps) {
+export function AvatarDecoration({ userId, children, inset = DEFAULT_INSET }: AvatarDecorationProps) {
   const slug = useAvatarDecoration(userId);
 
   if (!slug) {
@@ -32,12 +30,12 @@ export function AvatarDecoration({ userId, children }: AvatarDecorationProps) {
         src={decorationUrl(slug)}
         style={{
           position: 'absolute',
-          top: -INSET,
-          left: -INSET,
-          right: -INSET,
-          bottom: -INSET,
-          width: `calc(100% + ${INSET * 2}px)`,
-          height: `calc(100% + ${INSET * 2}px)`,
+          top: -inset,
+          left: -inset,
+          right: -inset,
+          bottom: -inset,
+          width: `calc(100% + ${inset * 2}px)`,
+          height: `calc(100% + ${inset * 2}px)`,
           pointerEvents: 'none',
           zIndex: 10,
           objectFit: 'contain',