From 75400428ad2b84c707f60fc5e6b378f46f565ef9 Mon Sep 17 00:00:00 2001
From: TJ <tracy@coder.com>
Date: Mon, 24 Aug 2026 22:54:19 -0700
Subject: [PATCH] fix(site/src): give built-in emoji avatars a consistent inset
 (#28492)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 20 +++++++++++++++++++
 site/src/components/Avatar/Avatar.tsx         | 15 +++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/Avatar/Avatar.stories.tsx
index 4b6b020dd8a..a9c51fef621 100644
--- a/site/src/components/Avatar/Avatar.stories.tsx
+++ b/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: "",
diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
index d080ebed312..71dd67b05de 100644
--- a/site/src/components/Avatar/Avatar.tsx
+++ b/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