improve ui

src/components/NavMenu.vue

@@ -1,6 +1,6 @@
 <template>
     <Sidebar side="left" variant="sidebar" collapsible="icon">
-        <SidebarContent class="pt-2">
+        <SidebarContent class="pt-2" style="container-type: inline-size">
             <SidebarGroup>
                 <SidebarGroupContent>
                     <SidebarMenu v-if="navLayoutReady">
@@ -22,10 +22,12 @@
                                     <span v-show="!isCollapsed">{{
                                         item.titleIsCustom ? item.title : t(item.title || '')
                                     }}</span>
-                                    <template v-if="item.action === 'direct-access' && !isCollapsed">
-                                        <Kbd class="ml-auto">{{ isMac ? '⌘' : 'Ctrl' }}</Kbd>
+                                    <span
+                                        v-if="item.action === 'direct-access' && !isCollapsed"
+                                        class="nav-shortcut-hint ml-auto inline-flex items-center gap-0.5">
+                                        <Kbd>{{ isMac ? '⌘' : 'Ctrl' }}</Kbd>
                                         <Kbd>D</Kbd>
-                                    </template>
+                                    </span>
                                 </SidebarMenuButton>
                             </SidebarMenuItem>
 
@@ -783,4 +785,10 @@
         border-radius: 50%;
         transform: translateY(-50%);
     }
+
+    @container (max-width: 250px) {
+        .nav-shortcut-hint {
+            display: none;
+        }
+    }
 </style>

src/views/Layout/MainLayout.vue

@@ -120,8 +120,7 @@
     const router = useRouter();
 
     const appearanceSettingsStore = useAppearanceSettingsStore();
-    const { navWidth, isNavCollapsed, showStatusBar } =
-        storeToRefs(appearanceSettingsStore);
+    const { navWidth, isNavCollapsed, showStatusBar } = storeToRefs(appearanceSettingsStore);
 
     const sidebarOpen = computed(() => !isNavCollapsed.value);
 

src/views/MyAvatars/MyAvatars.vue

@@ -5,6 +5,7 @@
             :table-style="tableHeightStyle"
             :page-sizes="pageSizes"
             :total-items="filteredAvatars.length"
+            :loading="isLoading"
             :on-page-size-change="handlePageSizeChange"
             :on-row-click="handleRowClick"
             :row-class="getRowClass"
@@ -347,7 +348,18 @@
         if (currentUser.value.currentAvatar === avatarId) {
             return;
         }
-        selectAvatarWithoutConfirmation(avatarId);
+        const avatar = avatars.value.find((a) => a.id === avatarId);
+        const avatarName = avatar?.name || avatarId;
+        modalStore
+            .confirm({
+                title: t('confirm.title'),
+                description: `${t('confirm.select_avatar')}\n${avatarName}`
+            })
+            .then(({ ok }) => {
+                if (ok) {
+                    selectAvatarWithoutConfirmation(avatarId);
+                }
+            });
     }
 
     /**