From 17eb3430d0ca998057f6c68d099e4ecacc621582 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 18 Aug 2026 20:45:18 -0600
Subject: [PATCH] fix: conditional auto padding being applied on user avatars

---
 apps/app-frontend/src/components/ui/AccountsCard.vue | 7 ++++++-
 apps/frontend/src/components/ui/NotificationItem.vue | 2 +-
 apps/frontend/src/error.vue                          | 2 +-
 packages/ui/src/components/base/Avatar.vue           | 4 +++-
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/AccountsCard.vue b/apps/app-frontend/src/components/ui/AccountsCard.vue
index ac9136f6c2..bcb144f450 100644
--- a/apps/app-frontend/src/components/ui/AccountsCard.vue
+++ b/apps/app-frontend/src/components/ui/AccountsCard.vue
@@ -20,6 +20,7 @@
 			<div class="flex gap-2 w-full min-w-0">
 				<Avatar
 					size="36px"
+					disable-conditional-icon-padding
 					:src="
 						selectedAccount
 							? avatarUrl
@@ -46,7 +47,11 @@
 							class="w-5 h-5 text-brand shrink-0"
 						/>
 						<RadioButtonIcon v-else class="w-5 h-5 text-secondary shrink-0" />
-						<Avatar :src="getAccountAvatarUrl(account)" size="24px" />
+						<Avatar
+							:src="getAccountAvatarUrl(account)"
+							size="24px"
+							disable-conditional-icon-padding
+						/>
 						<p
 							class="m-0 truncate min-w-0"
 							:class="
diff --git a/apps/frontend/src/components/ui/NotificationItem.vue b/apps/frontend/src/components/ui/NotificationItem.vue
index 4f3cfa001b..cba469fade 100644
--- a/apps/frontend/src/components/ui/NotificationItem.vue
+++ b/apps/frontend/src/components/ui/NotificationItem.vue
@@ -98,7 +98,7 @@
 						<Avatar size="xs" :src="organization.icon_url" :raised="raised" no-shadow />
 					</nuxt-link>
 					<nuxt-link v-else-if="user" :to="getUserLink(user)" tabindex="-1">
-						<Avatar size="xs" :src="user.avatar_url" :raised="raised" no-shadow />
+						<Avatar size="xs" :src="user.avatar_url" :raised="raised" no-shadow circle />
 					</nuxt-link>
 					<Avatar v-else size="xs" :raised="raised" no-shadow />
 				</template>
diff --git a/apps/frontend/src/error.vue b/apps/frontend/src/error.vue
index aec5aeb970..ce915498fe 100644
--- a/apps/frontend/src/error.vue
+++ b/apps/frontend/src/error.vue
@@ -34,7 +34,7 @@
 						<div
 							class="flex items-center gap-2 rounded-2xl border border-solid border-surface-5 bg-surface-4 p-4"
 						>
-							<Avatar :src="auth.user.avatar_url" size="32px" />
+							<Avatar :src="auth.user.avatar_url" size="32px" circle />
 							<span class="font-medium text-contrast">{{ auth.user.username }}</span>
 
 							<Button type="quiet" color="red" native-type="button" class="ml-auto" @click="logout">
diff --git a/packages/ui/src/components/base/Avatar.vue b/packages/ui/src/components/base/Avatar.vue
index ced19b6727..72465ce38b 100644
--- a/packages/ui/src/components/base/Avatar.vue
+++ b/packages/ui/src/components/base/Avatar.vue
@@ -8,7 +8,7 @@
 			circle: circle,
 			detecting: !hasDetectedCorners,
 			'no-shadow': noShadow,
-			padded: hasTransparentCorners,
+			padded: hasTransparentCorners && !circle && !disableConditionalIconPadding,
 			raised: raised,
 			pixelated: pixelated,
 		}"
@@ -72,6 +72,7 @@ const props = withDefaults(
 		size?: string
 		circle?: boolean
 		noShadow?: boolean
+		disableConditionalIconPadding?: boolean
 		loading?: 'eager' | 'lazy'
 		raised?: boolean
 		tintBy?: string | null
@@ -82,6 +83,7 @@ const props = withDefaults(
 		size: '2rem',
 		circle: false,
 		noShadow: false,
+		disableConditionalIconPadding: false,
 		loading: 'eager',
 		raised: false,
 		tintBy: null,