From 3805729ac4fd7673a16019c635ae6f3f9a9f7900 Mon Sep 17 00:00:00 2001
From: RYGrit <ry_grit@sina.com>
Date: Thu, 5 Feb 2026 21:36:03 +0800
Subject: [PATCH] fix(ui): fix squashed avatars & add missing mobile bluesky
 avatar

---
 app/components/Header/AccountMenu.client.vue |  8 ++++----
 app/components/Header/MobileMenu.client.vue  | 15 +++++++++++++--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
index 82c0fde1c..f9525a86b 100644
--- a/app/components/Header/AccountMenu.client.vue
+++ b/app/components/Header/AccountMenu.client.vue
@@ -77,7 +77,7 @@ function openAuthModal() {
           :alt="npmUser || $t('account_menu.npm_cli')"
           width="24"
           height="24"
-          class="w-6 h-6 rounded-full ring-2 ring-bg"
+          class="w-6 h-6 rounded-full ring-2 ring-bg object-cover"
         />
         <span
           v-else-if="isNpmConnected"
@@ -93,7 +93,7 @@ function openAuthModal() {
           :alt="atprotoUser.handle"
           width="24"
           height="24"
-          class="w-6 h-6 rounded-full ring-2 ring-bg"
+          class="w-6 h-6 rounded-full ring-2 ring-bg object-cover"
           :class="hasBothConnections ? 'relative z-10' : ''"
         />
         <span
@@ -153,7 +153,7 @@ function openAuthModal() {
                 :alt="npmUser"
                 width="32"
                 height="32"
-                class="w-8 h-8 rounded-full"
+                class="w-8 h-8 rounded-full object-cover"
               />
               <span
                 v-else
@@ -196,7 +196,7 @@ function openAuthModal() {
                 :alt="atprotoUser.handle"
                 width="32"
                 height="32"
-                class="w-8 h-8 rounded-full"
+                class="w-8 h-8 rounded-full object-cover"
               />
               <span
                 v-else
diff --git a/app/components/Header/MobileMenu.client.vue b/app/components/Header/MobileMenu.client.vue
index 1f589db39..334ed5461 100644
--- a/app/components/Header/MobileMenu.client.vue
+++ b/app/components/Header/MobileMenu.client.vue
@@ -243,7 +243,7 @@ onUnmounted(deactivate)
                   :alt="npmUser"
                   width="20"
                   height="20"
-                  class="w-5 h-5 rounded-full"
+                  class="w-5 h-5 rounded-full object-cover"
                 />
                 <span
                   v-else
@@ -262,7 +262,18 @@ onUnmounted(deactivate)
                 class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
                 @click="handleShowAuth"
               >
-                <span class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center">
+                <img
+                  v-if="atprotoUser.avatar"
+                  :src="atprotoUser.avatar"
+                  :alt="atprotoUser.handle"
+                  width="20"
+                  height="20"
+                  class="w-5 h-5 rounded-full object-cover"
+                />
+                <span
+                  v-else
+                  class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center"
+                >
                   <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
                 </span>
                 <span class="flex-1 truncate">@{{ atprotoUser.handle }}</span>