From aa9fafa37287b47a4648abf4937f1f6df8786677 Mon Sep 17 00:00:00 2001
From: Jake Howell <jacob@coder.com>
Date: Tue, 3 Mar 2026 22:48:41 +1100
Subject: [PATCH] fix: resolve `<Avatar />` incorrect sizes (#22538)

This pull-request updates our icons to be inline with the Figma file.
They were slightly too small in the two variants of `--avatar-default`
and `--avatar-sm`. Now these are inline with what we have defined and
using the correct variants in the breadcrumbs.
---
 site/src/components/FullPageLayout/Topbar.tsx    | 2 +-
 site/src/index.css                               | 4 ++--
 site/src/pages/WorkspacePage/WorkspaceTopbar.tsx | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/src/components/FullPageLayout/Topbar.tsx b/site/src/components/FullPageLayout/Topbar.tsx
index d3a38d017c..2c4685d0f5 100644
--- a/site/src/components/FullPageLayout/Topbar.tsx
+++ b/site/src/components/FullPageLayout/Topbar.tsx
@@ -56,7 +56,7 @@ export const TopbarDivider: FC<
 };
 
 export const TopbarAvatar: FC<AvatarProps> = (props) => {
-	return <Avatar {...props} variant="icon" size="md" />;
+	return <Avatar {...props} variant="icon" size="sm" />;
 };
 
 type TopbarIconProps = HTMLAttributes<HTMLOrSVGElement> & {
diff --git a/site/src/index.css b/site/src/index.css
index 412971dcde..d049df80b3 100644
--- a/site/src/index.css
+++ b/site/src/index.css
@@ -66,8 +66,8 @@
 		--primary: 221 83% 53%;
 		--primary-foreground: 0 0% 98%;
 		--avatar-lg: 2.5rem;
-		--avatar-default: 1.5rem;
-		--avatar-sm: 1.125rem;
+		--avatar-default: 2rem;
+		--avatar-sm: 1.5rem;
 	}
 	.dark {
 		--content-primary: 0 0% 100%;
diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
index b64352da65..b7add9cf74 100644
--- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
@@ -265,7 +265,7 @@ const OwnerBreadcrumb: FC<OwnerBreadcrumbProps> = ({
 		<HelpTooltip>
 			<HelpTooltipTrigger asChild>
 				<span css={styles.breadcrumbSegment}>
-					<Avatar size="md" fallback={ownerName} src={ownerAvatarUrl} />
+					<Avatar size="sm" fallback={ownerName} src={ownerAvatarUrl} />
 					<span css={styles.breadcrumbText}>{ownerName}</span>
 				</span>
 			</HelpTooltipTrigger>
@@ -293,7 +293,7 @@ const OrganizationBreadcrumb: FC<OrganizationBreadcrumbProps> = ({
 			<HelpTooltipTrigger asChild>
 				<span css={styles.breadcrumbSegment}>
 					<Avatar
-						size="md"
+						size="sm"
 						variant="icon"
 						src={orgIconUrl}
 						fallback={orgName}