From 7baf0d4a9ab2e7a4deb489c731b5030e64960ceb Mon Sep 17 00:00:00 2001
From: Andrew Aquino <dawneraq@gmail.com>
Date: Tue, 30 Jun 2026 12:08:58 -0700
Subject: [PATCH] fix(site): restore missing avatar padding from
 TemplateBuilderAvatarData (#26884)

fixes DEVEX-568

The `Avatar` variant I actually wanted for `TemplateBuilderAvatarData`
during #26776 was the compound one with both `size="lg" variant="icon"`,
which includes padding:


https://github.com/coder/coder/blob/2be540e469677e716d48612a5f5d078a8eb35bce/site/src/components/Avatar/Avatar.tsx#L35-L40

Using `Avatar` for `TemplateCard`/`ModuleCard` also ensures that those
components display a theme-appropriate icon image, i.e., light on dark /
dark on light.
---
 site/src/pages/TemplateBuilder/ModuleCard.tsx            | 9 ++-------
 .../pages/TemplateBuilder/TemplateBuilderAvatarData.tsx  | 2 +-
 site/src/pages/TemplateBuilder/TemplateCard.tsx          | 9 ++-------
 3 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/site/src/pages/TemplateBuilder/ModuleCard.tsx b/site/src/pages/TemplateBuilder/ModuleCard.tsx
index a1199b90d1..e9214ec11e 100644
--- a/site/src/pages/TemplateBuilder/ModuleCard.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleCard.tsx
@@ -1,5 +1,6 @@
 import { BadgeCheckIcon, CheckIcon } from "lucide-react";
 import { useId } from "react";
+import { Avatar } from "#/components/Avatar/Avatar";
 import { Link } from "#/components/Link/Link";
 import { cn } from "#/utils/cn";
 
@@ -45,13 +46,7 @@ export const ModuleCard: React.FC<ModuleCardProps> = ({
 			}}
 		>
 			<div className="flex items-start justify-between mb-3">
-				<div className="flex items-center justify-center p-1 rounded-md size-10 shrink-0 bg-surface-secondary border border-solid border-border">
-					{iconUrl ? (
-						<img src={iconUrl} alt="" className="size-7 object-contain" />
-					) : (
-						<div className="size-7 rounded bg-surface-primary" />
-					)}
-				</div>
+				<Avatar src={iconUrl} size="lg" variant="icon" />
 				<div
 					aria-hidden="true"
 					className={cn(
diff --git a/site/src/pages/TemplateBuilder/TemplateBuilderAvatarData.tsx b/site/src/pages/TemplateBuilder/TemplateBuilderAvatarData.tsx
index 7ac2cdd451..7310ced0f3 100644
--- a/site/src/pages/TemplateBuilder/TemplateBuilderAvatarData.tsx
+++ b/site/src/pages/TemplateBuilder/TemplateBuilderAvatarData.tsx
@@ -18,7 +18,7 @@ export const TemplateBuilderAvatarData: FC<TemplateBuilderAvatarDataProps> = ({
 }) => {
 	return (
 		<AvatarData
-			avatar={<Avatar src={iconUrl} size="lg" />}
+			avatar={<Avatar src={iconUrl} size="lg" variant="icon" />}
 			title={<h3 className="m-0 text-xl font-semibold">{name}</h3>}
 			subtitle={
 				<>
diff --git a/site/src/pages/TemplateBuilder/TemplateCard.tsx b/site/src/pages/TemplateBuilder/TemplateCard.tsx
index 5650a3358b..8465d5b76f 100644
--- a/site/src/pages/TemplateBuilder/TemplateCard.tsx
+++ b/site/src/pages/TemplateBuilder/TemplateCard.tsx
@@ -1,5 +1,6 @@
 import { BadgeCheckIcon } from "lucide-react";
 import { useId } from "react";
+import { Avatar } from "#/components/Avatar/Avatar";
 import { Link } from "#/components/Link/Link";
 import { cn } from "#/utils/cn";
 
@@ -45,13 +46,7 @@ export const TemplateCard: React.FC<TemplateCardProps> = ({
 			}}
 		>
 			<div className="flex items-start justify-between mb-3">
-				<div className="flex items-center justify-center p-1 rounded-md size-10 shrink-0 bg-surface-secondary border border-solid border-border">
-					{iconUrl ? (
-						<img src={iconUrl} alt="" className="size-7 object-contain" />
-					) : (
-						<div className="size-7 rounded bg-surface-primary" />
-					)}
-				</div>
+				<Avatar src={iconUrl} size="lg" variant="icon" />
 				<div
 					aria-hidden="true"
 					className={cn(