fix(site/src): give built-in emoji avatars a consistent inset (#28492)

Built-in emoji avatars (`/emojis/*.png`) rendered inconsistently: edge
to edge on user avatars (users table, organization members, group member
lists, exposed by the avatar `IconField` from #26652), and with the
tighter icon padding on pages that pass `variant="icon"` such as
workspace proxies.

`Avatar` gains an `emoji` variant with a proportional inset of 20% per
side, expressed as `calc(var(--avatar-*) * 0.2)` so it tracks the avatar
size tokens. Built-in emoji sources, detected by the shared
`isBuiltInEmojiUrl` helper (`site/src/utils/emojis.ts`, which also
generates the URLs for `IconField`), always resolve to it, including at
call sites that pass `variant="icon"` for data-dependent sources; the
override is documented on `AvatarProps`. Non-emoji icon avatars are
unchanged. Added `BuiltInEmoji{Lg,Md,Sm}Size` stories.

<details>
<summary>Investigation notes</summary>

- Suspected MUI-removal regression, but the demui Avatar change (#24527)
was style-mechanics only (`css` prop to `style`, `CSSObject` to
`CSSProperties`).
- Insets have always been opt-in via `variant="icon"` (compound variants
in `avatarVariants`). Group rows/headers and workspace proxies pass it;
user avatar call sites (`UsersTable`, `OrganizationMembersTable`,
`GroupMembersPage`, `GroupsPageView` member column) do not.
- Emoji user avatars only became reachable with #26652, which reuses the
group/template emoji picker that produces `/emojis/<unified>.png` URLs,
exposing the missing inset.
- The icon variant's padding is proportionally tighter at `md`/`sm`
(12.5%) than `lg` (20%), which made default-size emojis look oversized,
so emojis get their own size-keyed inset instead of reusing the icon
variant.
- Fixed in the shared component rather than at each call site so all
current and future emoji avatars are consistent.

</details>

---

🤖 Generated by Coder Agents on behalf of @tracyjohnsonux

---------

Co-authored-by: Jake Howell <jake@hwll.me>

site/src/components/Avatar/Avatar.stories.tsx

@@ -53,6 +53,26 @@ export const NonSquaredIcon: Story = {
 	},
 };
 
+export const BuiltInEmojiLgSize: Story = {
+	args: {
+		size: "lg",
+		src: "/emojis/1f64c.png",
+	},
+};
+
+export const BuiltInEmojiMdSize: Story = {
+	args: {
+		src: "/emojis/1f64c.png",
+	},
+};
+
+export const BuiltInEmojiSmSize: Story = {
+	args: {
+		size: "sm",
+		src: "/emojis/1f64c.png",
+	},
+};
+
 export const FallbackLgSize: Story = {
 	args: {
 		src: "",

site/src/components/Avatar/Avatar.tsx

@@ -73,13 +73,26 @@ export const Avatar: React.FC<AvatarProps> = ({
 	fallback,
 	alt = "",
 	children,
+	style,
 	...props
 }) => {
 	const { externalImages } = useAppearance();
 
+	const isEmoji = src?.startsWith("/emojis/");
+
 	return (
 		<AvatarPrimitive.Root
-			className={cn(avatarVariants({ size, variant, className }))}
+			className={cn(
+				avatarVariants({
+					size,
+					variant: isEmoji ? "default" : variant,
+					className,
+				}),
+			)}
+			style={{
+				...style,
+				padding: isEmoji ? "20%" : style?.padding,
+			}}
 			{...props}
 		>
 			<AvatarPrimitive.Image