From cb513c101b59ece6261ea6b06eaeb7df5b56bb85 Mon Sep 17 00:00:00 2001
From: Tracy Johnson <tracy@coder.com>
Date: Mon, 24 Aug 2026 16:46:30 +0000
Subject: [PATCH 01/12] fix(site/src/components/Avatar): pad built-in emoji
 avatars like icons

---
 site/src/components/Avatar/Avatar.stories.tsx | 20 +++++++++++++++++++
 site/src/components/Avatar/Avatar.tsx         |  9 ++++++++-
 2 files changed, 28 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..52649fb0bcd 100644
--- a/site/src/components/Avatar/Avatar.tsx
+++ b/site/src/components/Avatar/Avatar.tsx
@@ -77,9 +77,16 @@ export const Avatar: React.FC<AvatarProps> = ({
 }) => {
 	const { externalImages } = useAppearance();
 
+	// Built-in emoji avatars are glyphs rather than photos, so they need the
+	// same inset padding as icons to avoid rendering edge to edge.
+	const resolvedVariant =
+		variant ?? (src?.startsWith("/emojis/") ? "icon" : undefined);
+
 	return (
 		<AvatarPrimitive.Root
-			className={cn(avatarVariants({ size, variant, className }))}
+			className={cn(
+				avatarVariants({ size, variant: resolvedVariant, className }),
+			)}
 			{...props}
 		>
 			<AvatarPrimitive.Image

From 59fd662c133fc6cefe59784e8f999f186153ffc3 Mon Sep 17 00:00:00 2001
From: Tracy Johnson <tracy@coder.com>
Date: Mon, 24 Aug 2026 17:12:07 +0000
Subject: [PATCH 02/12] fix(site/src/components/Avatar): use proportional inset
 for emoji avatars

---
 site/src/components/Avatar/Avatar.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
index 52649fb0bcd..f60997a1c5d 100644
--- a/site/src/components/Avatar/Avatar.tsx
+++ b/site/src/components/Avatar/Avatar.tsx
@@ -65,6 +65,12 @@ export type AvatarProps = AvatarPrimitive.AvatarProps &
 		ref?: React.Ref<React.ComponentRef<typeof AvatarPrimitive.Root>>;
 	};
 
+const emojiPaddingBySize: Record<NonNullable<AvatarProps["size"]>, string> = {
+	lg: "p-2",
+	md: "p-[6px]",
+	sm: "p-1",
+};
+
 export const Avatar: React.FC<AvatarProps> = ({
 	className,
 	size,
@@ -77,15 +83,18 @@ export const Avatar: React.FC<AvatarProps> = ({
 }) => {
 	const { externalImages } = useAppearance();
 
-	// Built-in emoji avatars are glyphs rather than photos, so they need the
-	// same inset padding as icons to avoid rendering edge to edge.
-	const resolvedVariant =
-		variant ?? (src?.startsWith("/emojis/") ? "icon" : undefined);
+	// Built-in emoji avatars are glyphs rather than photos, so they need an
+	// inset to avoid rendering edge to edge. The icon variant's padding is too
+	// tight at smaller sizes for emojis, so they get a proportional inset of
+	// roughly 20% per side instead.
+	const isBuiltInEmoji = !variant && src?.startsWith("/emojis/");
 
 	return (
 		<AvatarPrimitive.Root
 			className={cn(
-				avatarVariants({ size, variant: resolvedVariant, className }),
+				avatarVariants({ size, variant }),
+				isBuiltInEmoji && emojiPaddingBySize[size ?? "md"],
+				className,
 			)}
 			{...props}
 		>

From 18d13ebab1dda41a198dfd08e02b7e8588e229e0 Mon Sep 17 00:00:00 2001
From: Tracy Johnson <tracy@coder.com>
Date: Mon, 24 Aug 2026 17:19:02 +0000
Subject: [PATCH 03/12] fix(site/src/components/Avatar): apply emoji inset
 regardless of variant

---
 site/src/components/Avatar/Avatar.stories.tsx | 9 +++++++++
 site/src/components/Avatar/Avatar.tsx         | 6 +++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/Avatar/Avatar.stories.tsx
index a9c51fef621..f832582b903 100644
--- a/site/src/components/Avatar/Avatar.stories.tsx
+++ b/site/src/components/Avatar/Avatar.stories.tsx
@@ -73,6 +73,15 @@ export const BuiltInEmojiSmSize: Story = {
 	},
 };
 
+// The emoji inset applies even when a caller passes the icon variant, so
+// emoji avatars look the same across pages.
+export const BuiltInEmojiIconVariant: Story = {
+	args: {
+		variant: "icon",
+		src: "/emojis/1f3e0.png",
+	},
+};
+
 export const FallbackLgSize: Story = {
 	args: {
 		src: "",
diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
index f60997a1c5d..d8675474fee 100644
--- a/site/src/components/Avatar/Avatar.tsx
+++ b/site/src/components/Avatar/Avatar.tsx
@@ -85,9 +85,9 @@ export const Avatar: React.FC<AvatarProps> = ({
 
 	// Built-in emoji avatars are glyphs rather than photos, so they need an
 	// inset to avoid rendering edge to edge. The icon variant's padding is too
-	// tight at smaller sizes for emojis, so they get a proportional inset of
-	// roughly 20% per side instead.
-	const isBuiltInEmoji = !variant && src?.startsWith("/emojis/");
+	// tight at smaller sizes for emojis, so regardless of variant they get a
+	// proportional inset of roughly 20% per side keyed by size.
+	const isBuiltInEmoji = src?.startsWith("/emojis/");
 
 	return (
 		<AvatarPrimitive.Root

From 43943f7a29387e402f79627b3d9a350d53c84cd8 Mon Sep 17 00:00:00 2001
From: Tracy Johnson <tracy@coder.com>
Date: Mon, 24 Aug 2026 20:56:37 +0000
Subject: [PATCH 04/12] refactor(site/src/components/Avatar): model emoji inset
 as a cva variant

---
 site/src/components/Avatar/Avatar.stories.tsx |  4 +--
 site/src/components/Avatar/Avatar.tsx         | 36 ++++++++++++-------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/Avatar/Avatar.stories.tsx
index f832582b903..99b196aa562 100644
--- a/site/src/components/Avatar/Avatar.stories.tsx
+++ b/site/src/components/Avatar/Avatar.stories.tsx
@@ -73,8 +73,8 @@ export const BuiltInEmojiSmSize: Story = {
 	},
 };
 
-// The emoji inset applies even when a caller passes the icon variant, so
-// emoji avatars look the same across pages.
+// Built-in emoji sources resolve to the emoji variant even when a caller
+// passes the icon variant, so emoji avatars look the same across pages.
 export const BuiltInEmojiIconVariant: Story = {
 	args: {
 		variant: "icon",
diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
index d8675474fee..e4ef1105079 100644
--- a/site/src/components/Avatar/Avatar.tsx
+++ b/site/src/components/Avatar/Avatar.tsx
@@ -27,6 +27,7 @@ const avatarVariants = cva(
 			variant: {
 				default: null,
 				icon: "[&_svg]:size-full",
+				emoji: null,
 			},
 		},
 		defaultVariants: {
@@ -48,6 +49,23 @@ const avatarVariants = cva(
 				variant: "icon",
 				className: "p-[3px]",
 			},
+			// Emojis are glyphs rather than photos or full-bleed icons, so they
+			// get a proportional inset of roughly 20% per side.
+			{
+				size: "lg",
+				variant: "emoji",
+				className: "p-2",
+			},
+			{
+				size: "md",
+				variant: "emoji",
+				className: "p-[6px]",
+			},
+			{
+				size: "sm",
+				variant: "emoji",
+				className: "p-1",
+			},
 		],
 	},
 );
@@ -65,12 +83,6 @@ export type AvatarProps = AvatarPrimitive.AvatarProps &
 		ref?: React.Ref<React.ComponentRef<typeof AvatarPrimitive.Root>>;
 	};
 
-const emojiPaddingBySize: Record<NonNullable<AvatarProps["size"]>, string> = {
-	lg: "p-2",
-	md: "p-[6px]",
-	sm: "p-1",
-};
-
 export const Avatar: React.FC<AvatarProps> = ({
 	className,
 	size,
@@ -83,17 +95,15 @@ export const Avatar: React.FC<AvatarProps> = ({
 }) => {
 	const { externalImages } = useAppearance();
 
-	// Built-in emoji avatars are glyphs rather than photos, so they need an
-	// inset to avoid rendering edge to edge. The icon variant's padding is too
-	// tight at smaller sizes for emojis, so regardless of variant they get a
-	// proportional inset of roughly 20% per side keyed by size.
-	const isBuiltInEmoji = src?.startsWith("/emojis/");
+	// Built-in emoji sources always use the emoji variant so they render
+	// consistently at every call site, including those that pass the icon
+	// variant for data-dependent sources that may be an icon or an emoji.
+	const resolvedVariant = src?.startsWith("/emojis/") ? "emoji" : variant;
 
 	return (
 		<AvatarPrimitive.Root
 			className={cn(
-				avatarVariants({ size, variant }),
-				isBuiltInEmoji && emojiPaddingBySize[size ?? "md"],
+				avatarVariants({ size, variant: resolvedVariant }),
 				className,
 			)}
 			{...props}

From 178e2be35665d00db9f90e7739ebe8c5ebf86619 Mon Sep 17 00:00:00 2001
From: Tracy Johnson <tracy@coder.com>
Date: Mon, 24 Aug 2026 21:08:44 +0000
Subject: [PATCH 05/12] chore(site/src/components/Avatar): drop
 call-site-specific emoji story

---
 site/src/components/Avatar/Avatar.stories.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/Avatar/Avatar.stories.tsx
index 99b196aa562..a9c51fef621 100644
--- a/site/src/components/Avatar/Avatar.stories.tsx
+++ b/site/src/components/Avatar/Avatar.stories.tsx
@@ -73,15 +73,6 @@ export const BuiltInEmojiSmSize: Story = {
 	},
 };
 
-// Built-in emoji sources resolve to the emoji variant even when a caller
-// passes the icon variant, so emoji avatars look the same across pages.
-export const BuiltInEmojiIconVariant: Story = {
-	args: {
-		variant: "icon",
-		src: "/emojis/1f3e0.png",
-	},
-};
-
 export const FallbackLgSize: Story = {
 	args: {
 		src: "",

From 12b872083a6ed813bf6445ccc9e2a722311b6682 Mon Sep 17 00:00:00 2001
From: Tracy Johnson <tracy@coder.com>
Date: Mon, 24 Aug 2026 21:30:11 +0000
Subject: [PATCH 06/12] chore(site/src/components/Avatar): tighten emoji
 variant comments

---
 site/src/components/Avatar/Avatar.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
index e4ef1105079..f65b73ad799 100644
--- a/site/src/components/Avatar/Avatar.tsx
+++ b/site/src/components/Avatar/Avatar.tsx
@@ -49,8 +49,7 @@ const avatarVariants = cva(
 				variant: "icon",
 				className: "p-[3px]",
 			},
-			// Emojis are glyphs rather than photos or full-bleed icons, so they
-			// get a proportional inset of roughly 20% per side.
+			// Emojis get a proportional inset of roughly 20% per side.
 			{
 				size: "lg",
 				variant: "emoji",
@@ -95,9 +94,8 @@ export const Avatar: React.FC<AvatarProps> = ({
 }) => {
 	const { externalImages } = useAppearance();
 
-	// Built-in emoji sources always use the emoji variant so they render
-	// consistently at every call site, including those that pass the icon
-	// variant for data-dependent sources that may be an icon or an emoji.
+	// Built-in emojis always use the emoji variant, even when a caller
+	// passes another one.
 	const resolvedVariant = src?.startsWith("/emojis/") ? "emoji" : variant;
 
 	return (

From 876729d99d94473c95d245b5774fcc7d67545f52 Mon Sep 17 00:00:00 2001
From: Tracy Johnson <tracy@coder.com>
Date: Tue, 25 Aug 2026 05:10:14 +0000
Subject: [PATCH 07/12] refactor(site/src): address emoji avatar review
 feedback

---
 site/src/components/Avatar/Avatar.tsx       | 23 ++++++++++++++-------
 site/src/components/IconField/IconField.tsx |  3 ++-
 site/src/utils/emojis.ts                    | 15 ++++++++++++++
 3 files changed, 32 insertions(+), 9 deletions(-)
 create mode 100644 site/src/utils/emojis.ts

diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
index f65b73ad799..60dc4c1b40f 100644
--- a/site/src/components/Avatar/Avatar.tsx
+++ b/site/src/components/Avatar/Avatar.tsx
@@ -14,6 +14,7 @@ import { Avatar as AvatarPrimitive } from "radix-ui";
 import { useAppearance } from "#/theme/appearance";
 import { getExternalImageStylesFromUrl } from "#/theme/externalImages";
 import { cn } from "#/utils/cn";
+import { isBuiltInEmojiUrl } from "#/utils/emojis";
 
 const avatarVariants = cva(
 	"relative flex shrink-0 overflow-hidden rounded border border-solid bg-surface-secondary text-content-secondary",
@@ -49,26 +50,33 @@ const avatarVariants = cva(
 				variant: "icon",
 				className: "p-[3px]",
 			},
-			// Emojis get a proportional inset of roughly 20% per side.
+			// Emojis get a proportional inset of 20% per side, so the padding
+			// stays in ratio with the --avatar-* size variables.
 			{
 				size: "lg",
 				variant: "emoji",
-				className: "p-2",
+				className: "p-[calc(var(--avatar-lg)*0.2)]",
 			},
 			{
 				size: "md",
 				variant: "emoji",
-				className: "p-[6px]",
+				className: "p-[calc(var(--avatar-default)*0.2)]",
 			},
 			{
 				size: "sm",
 				variant: "emoji",
-				className: "p-1",
+				className: "p-[calc(var(--avatar-sm)*0.2)]",
 			},
 		],
 	},
 );
 
+/**
+ * Avatar props. The variant prop is resolved internally: sources that
+ * isBuiltInEmojiUrl matches always render with the emoji variant, overriding
+ * any variant passed by the caller, so emojis look the same at call sites
+ * whose source is data-dependent and may be an icon, photo, or emoji.
+ */
 export type AvatarProps = AvatarPrimitive.AvatarProps &
 	VariantProps<typeof avatarVariants> & {
 		src?: string;
@@ -95,14 +103,13 @@ export const Avatar: React.FC<AvatarProps> = ({
 	const { externalImages } = useAppearance();
 
 	// Built-in emojis always use the emoji variant, even when a caller
-	// passes another one.
-	const resolvedVariant = src?.startsWith("/emojis/") ? "emoji" : variant;
+	// passes another one. See the AvatarProps doc.
+	const resolvedVariant = isBuiltInEmojiUrl(src) ? "emoji" : variant;
 
 	return (
 		<AvatarPrimitive.Root
 			className={cn(
-				avatarVariants({ size, variant: resolvedVariant }),
-				className,
+				avatarVariants({ size, variant: resolvedVariant, className }),
 			)}
 			{...props}
 		>
diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
index a868cb4c980..dca429b57f4 100644
--- a/site/src/components/IconField/IconField.tsx
+++ b/site/src/components/IconField/IconField.tsx
@@ -23,6 +23,7 @@ import {
 	PopoverTrigger,
 } from "#/components/Popover/Popover";
 import { cn } from "#/utils/cn";
+import { builtInEmojiUrl } from "#/utils/emojis";
 
 const EmojiPicker = lazy(() => import("./EmojiPicker"));
 
@@ -121,7 +122,7 @@ export const IconField: FC<IconFieldProps> = ({
 							<Suspense fallback={<Loader />}>
 								<EmojiPicker
 									onEmojiSelect={(emoji) => {
-										const picked = emoji.src ?? `/emojis/${emoji.unified}.png`;
+										const picked = emoji.src ?? builtInEmojiUrl(emoji.unified);
 										onPickEmoji(picked);
 										setOpen(false);
 									}}
diff --git a/site/src/utils/emojis.ts b/site/src/utils/emojis.ts
new file mode 100644
index 00000000000..1f2d2f81d6e
--- /dev/null
+++ b/site/src/utils/emojis.ts
@@ -0,0 +1,15 @@
+const builtInEmojiPath = "/emojis/";
+
+/**
+ * URL for a built-in emoji asset by its unified code point, as produced by
+ * the emoji picker. Keep in sync with isBuiltInEmojiUrl.
+ */
+export const builtInEmojiUrl = (unified: string) =>
+	`${builtInEmojiPath}${unified}.png`;
+
+/**
+ * Whether a source URL points at a built-in emoji asset generated by
+ * builtInEmojiUrl.
+ */
+export const isBuiltInEmojiUrl = (src: string | undefined): boolean =>
+	Boolean(src?.startsWith(builtInEmojiPath));

From 56ea3746b3024484836ed127e437c648312829fa Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 25 Aug 2026 05:24:05 +0000
Subject: [PATCH 08/12] =?UTF-8?q?=F0=9F=A4=96=20refactor(site/src):=20use?=
 =?UTF-8?q?=20style=20prop=20for=20emoji=20padding?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/Avatar/Avatar.tsx | 33 +++++++++++++--------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
index 60dc4c1b40f..9f932a25242 100644
--- a/site/src/components/Avatar/Avatar.tsx
+++ b/site/src/components/Avatar/Avatar.tsx
@@ -16,6 +16,12 @@ import { getExternalImageStylesFromUrl } from "#/theme/externalImages";
 import { cn } from "#/utils/cn";
 import { isBuiltInEmojiUrl } from "#/utils/emojis";
 
+const avatarSizeVariables = {
+	lg: "--avatar-lg",
+	md: "--avatar-default",
+	sm: "--avatar-sm",
+} as const;
+
 const avatarVariants = cva(
 	"relative flex shrink-0 overflow-hidden rounded border border-solid bg-surface-secondary text-content-secondary",
 	{
@@ -50,23 +56,6 @@ const avatarVariants = cva(
 				variant: "icon",
 				className: "p-[3px]",
 			},
-			// Emojis get a proportional inset of 20% per side, so the padding
-			// stays in ratio with the --avatar-* size variables.
-			{
-				size: "lg",
-				variant: "emoji",
-				className: "p-[calc(var(--avatar-lg)*0.2)]",
-			},
-			{
-				size: "md",
-				variant: "emoji",
-				className: "p-[calc(var(--avatar-default)*0.2)]",
-			},
-			{
-				size: "sm",
-				variant: "emoji",
-				className: "p-[calc(var(--avatar-sm)*0.2)]",
-			},
 		],
 	},
 );
@@ -98,6 +87,7 @@ export const Avatar: React.FC<AvatarProps> = ({
 	fallback,
 	alt = "",
 	children,
+	style,
 	...props
 }) => {
 	const { externalImages } = useAppearance();
@@ -105,12 +95,21 @@ export const Avatar: React.FC<AvatarProps> = ({
 	// Built-in emojis always use the emoji variant, even when a caller
 	// passes another one. See the AvatarProps doc.
 	const resolvedVariant = isBuiltInEmojiUrl(src) ? "emoji" : variant;
+	const resolvedSize = size ?? "md";
+	const resolvedStyle =
+		resolvedVariant === "emoji"
+			? {
+					...style,
+					padding: `calc(var(${avatarSizeVariables[resolvedSize]}) * 0.2)`,
+				}
+			: style;
 
 	return (
 		<AvatarPrimitive.Root
 			className={cn(
 				avatarVariants({ size, variant: resolvedVariant, className }),
 			)}
+			style={resolvedStyle}
 			{...props}
 		>
 			<AvatarPrimitive.Image

From 4b8edf820375d2949e8c65455f42ab7b410bb3bd Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 25 Aug 2026 05:33:24 +0000
Subject: [PATCH 09/12] =?UTF-8?q?=F0=9F=A4=96=20refactor(site/src):=20simp?=
 =?UTF-8?q?lify=20emoji=20avatar=20padding?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/Avatar/Avatar.tsx | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
index 9f932a25242..0bfd0ee46a9 100644
--- a/site/src/components/Avatar/Avatar.tsx
+++ b/site/src/components/Avatar/Avatar.tsx
@@ -16,12 +16,6 @@ import { getExternalImageStylesFromUrl } from "#/theme/externalImages";
 import { cn } from "#/utils/cn";
 import { isBuiltInEmojiUrl } from "#/utils/emojis";
 
-const avatarSizeVariables = {
-	lg: "--avatar-lg",
-	md: "--avatar-default",
-	sm: "--avatar-sm",
-} as const;
-
 const avatarVariants = cva(
 	"relative flex shrink-0 overflow-hidden rounded border border-solid bg-surface-secondary text-content-secondary",
 	{
@@ -95,21 +89,13 @@ export const Avatar: React.FC<AvatarProps> = ({
 	// Built-in emojis always use the emoji variant, even when a caller
 	// passes another one. See the AvatarProps doc.
 	const resolvedVariant = isBuiltInEmojiUrl(src) ? "emoji" : variant;
-	const resolvedSize = size ?? "md";
-	const resolvedStyle =
-		resolvedVariant === "emoji"
-			? {
-					...style,
-					padding: `calc(var(${avatarSizeVariables[resolvedSize]}) * 0.2)`,
-				}
-			: style;
 
 	return (
 		<AvatarPrimitive.Root
 			className={cn(
 				avatarVariants({ size, variant: resolvedVariant, className }),
 			)}
-			style={resolvedStyle}
+			style={resolvedVariant === "emoji" ? { padding: "20%", ...style } : style}
 			{...props}
 		>
 			<AvatarPrimitive.Image

From b9367b47347a745826124f531c94f9db0d1e9f13 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 25 Aug 2026 05:38:59 +0000
Subject: [PATCH 10/12] =?UTF-8?q?=F0=9F=A4=96=20refactor(site/src):=20pres?=
 =?UTF-8?q?erve=20avatar=20style=20padding?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/Avatar/Avatar.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
index 0bfd0ee46a9..f3e7e47f417 100644
--- a/site/src/components/Avatar/Avatar.tsx
+++ b/site/src/components/Avatar/Avatar.tsx
@@ -95,7 +95,10 @@ export const Avatar: React.FC<AvatarProps> = ({
 			className={cn(
 				avatarVariants({ size, variant: resolvedVariant, className }),
 			)}
-			style={resolvedVariant === "emoji" ? { padding: "20%", ...style } : style}
+			style={{
+				...style,
+				padding: resolvedVariant === "emoji" ? "20%" : style?.padding,
+			}}
 			{...props}
 		>
 			<AvatarPrimitive.Image

From 5f12cd63dee556a15f1dea96bc0b42ea1c5b45ab Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 25 Aug 2026 05:43:54 +0000
Subject: [PATCH 11/12] =?UTF-8?q?=F0=9F=A4=96=20refactor(site/src):=20inli?=
 =?UTF-8?q?ne=20emoji=20asset=20paths?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/Avatar/Avatar.tsx       | 11 +++++------
 site/src/components/IconField/IconField.tsx |  3 +--
 site/src/utils/emojis.ts                    | 15 ---------------
 3 files changed, 6 insertions(+), 23 deletions(-)
 delete mode 100644 site/src/utils/emojis.ts

diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
index f3e7e47f417..80942628b04 100644
--- a/site/src/components/Avatar/Avatar.tsx
+++ b/site/src/components/Avatar/Avatar.tsx
@@ -14,7 +14,6 @@ import { Avatar as AvatarPrimitive } from "radix-ui";
 import { useAppearance } from "#/theme/appearance";
 import { getExternalImageStylesFromUrl } from "#/theme/externalImages";
 import { cn } from "#/utils/cn";
-import { isBuiltInEmojiUrl } from "#/utils/emojis";
 
 const avatarVariants = cva(
 	"relative flex shrink-0 overflow-hidden rounded border border-solid bg-surface-secondary text-content-secondary",
@@ -55,10 +54,10 @@ const avatarVariants = cva(
 );
 
 /**
- * Avatar props. The variant prop is resolved internally: sources that
- * isBuiltInEmojiUrl matches always render with the emoji variant, overriding
- * any variant passed by the caller, so emojis look the same at call sites
- * whose source is data-dependent and may be an icon, photo, or emoji.
+ * Avatar props. The variant prop is resolved internally: built-in emoji
+ * sources always render with the emoji variant, overriding any variant passed
+ * by the caller, so emojis look the same at call sites whose source is
+ * data-dependent and may be an icon, photo, or emoji.
  */
 export type AvatarProps = AvatarPrimitive.AvatarProps &
 	VariantProps<typeof avatarVariants> & {
@@ -88,7 +87,7 @@ export const Avatar: React.FC<AvatarProps> = ({
 
 	// Built-in emojis always use the emoji variant, even when a caller
 	// passes another one. See the AvatarProps doc.
-	const resolvedVariant = isBuiltInEmojiUrl(src) ? "emoji" : variant;
+	const resolvedVariant = src?.startsWith("/emojis/") ? "emoji" : variant;
 
 	return (
 		<AvatarPrimitive.Root
diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
index dca429b57f4..a868cb4c980 100644
--- a/site/src/components/IconField/IconField.tsx
+++ b/site/src/components/IconField/IconField.tsx
@@ -23,7 +23,6 @@ import {
 	PopoverTrigger,
 } from "#/components/Popover/Popover";
 import { cn } from "#/utils/cn";
-import { builtInEmojiUrl } from "#/utils/emojis";
 
 const EmojiPicker = lazy(() => import("./EmojiPicker"));
 
@@ -122,7 +121,7 @@ export const IconField: FC<IconFieldProps> = ({
 							<Suspense fallback={<Loader />}>
 								<EmojiPicker
 									onEmojiSelect={(emoji) => {
-										const picked = emoji.src ?? builtInEmojiUrl(emoji.unified);
+										const picked = emoji.src ?? `/emojis/${emoji.unified}.png`;
 										onPickEmoji(picked);
 										setOpen(false);
 									}}
diff --git a/site/src/utils/emojis.ts b/site/src/utils/emojis.ts
deleted file mode 100644
index 1f2d2f81d6e..00000000000
--- a/site/src/utils/emojis.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-const builtInEmojiPath = "/emojis/";
-
-/**
- * URL for a built-in emoji asset by its unified code point, as produced by
- * the emoji picker. Keep in sync with isBuiltInEmojiUrl.
- */
-export const builtInEmojiUrl = (unified: string) =>
-	`${builtInEmojiPath}${unified}.png`;
-
-/**
- * Whether a source URL points at a built-in emoji asset generated by
- * builtInEmojiUrl.
- */
-export const isBuiltInEmojiUrl = (src: string | undefined): boolean =>
-	Boolean(src?.startsWith(builtInEmojiPath));

From 169f30a9cefc5ba5c1fdad07adc1efbb10a5ef7d Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 25 Aug 2026 05:45:26 +0000
Subject: [PATCH 12/12] =?UTF-8?q?=F0=9F=A4=96=20refactor(site/src):=20remo?=
 =?UTF-8?q?ve=20emoji=20avatar=20variant?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/Avatar/Avatar.tsx | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
index 80942628b04..71dd67b05de 100644
--- a/site/src/components/Avatar/Avatar.tsx
+++ b/site/src/components/Avatar/Avatar.tsx
@@ -27,7 +27,6 @@ const avatarVariants = cva(
 			variant: {
 				default: null,
 				icon: "[&_svg]:size-full",
-				emoji: null,
 			},
 		},
 		defaultVariants: {
@@ -53,12 +52,6 @@ const avatarVariants = cva(
 	},
 );
 
-/**
- * Avatar props. The variant prop is resolved internally: built-in emoji
- * sources always render with the emoji variant, overriding any variant passed
- * by the caller, so emojis look the same at call sites whose source is
- * data-dependent and may be an icon, photo, or emoji.
- */
 export type AvatarProps = AvatarPrimitive.AvatarProps &
 	VariantProps<typeof avatarVariants> & {
 		src?: string;
@@ -85,18 +78,20 @@ export const Avatar: React.FC<AvatarProps> = ({
 }) => {
 	const { externalImages } = useAppearance();
 
-	// Built-in emojis always use the emoji variant, even when a caller
-	// passes another one. See the AvatarProps doc.
-	const resolvedVariant = src?.startsWith("/emojis/") ? "emoji" : variant;
+	const isEmoji = src?.startsWith("/emojis/");
 
 	return (
 		<AvatarPrimitive.Root
 			className={cn(
-				avatarVariants({ size, variant: resolvedVariant, className }),
+				avatarVariants({
+					size,
+					variant: isEmoji ? "default" : variant,
+					className,
+				}),
 			)}
 			style={{
 				...style,
-				padding: resolvedVariant === "emoji" ? "20%" : style?.padding,
+				padding: isEmoji ? "20%" : style?.padding,
 			}}
 			{...props}
 		>