fix: conditional auto padding being applied on user avatars

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="

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>

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">

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,