From 785115c62b9c2e4ef903f3608f0e0c132ed67cc1 Mon Sep 17 00:00:00 2001
From: bayma888 <kubai666@126.com>
Date: Mon, 9 Feb 2026 18:14:50 +0800
Subject: [PATCH] fix(ui): improve group selector dropdown width and visibility

- Increase Select dropdown max-width from 320px to 480px for better content display
- Change KeysView group selector from fixed 256px to adaptive 280-480px width
- Make group switch icon always visible (60% opacity, 100% on hover)
- Allow group description to wrap to 2 lines instead of truncating
- Improve user experience for group selection in API keys page
---
 frontend/src/components/common/GroupOptionItem.vue | 2 +-
 frontend/src/components/common/Select.vue          | 2 +-
 frontend/src/views/user/KeysView.vue               | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/common/GroupOptionItem.vue b/frontend/src/components/common/GroupOptionItem.vue
index 44750350..8673b9b1 100644
--- a/frontend/src/components/common/GroupOptionItem.vue
+++ b/frontend/src/components/common/GroupOptionItem.vue
@@ -13,7 +13,7 @@
       />
       <span
         v-if="description"
-        class="w-full truncate text-left text-xs text-gray-500 dark:text-gray-400"
+        class="w-full text-left text-xs text-gray-500 dark:text-gray-400 line-clamp-2"
       >
         {{ description }}
       </span>
diff --git a/frontend/src/components/common/Select.vue b/frontend/src/components/common/Select.vue
index c90d0201..36b5e022 100644
--- a/frontend/src/components/common/Select.vue
+++ b/frontend/src/components/common/Select.vue
@@ -434,7 +434,7 @@ onUnmounted(() => {
 
 <style>
 .select-dropdown-portal {
-  @apply w-max min-w-[160px] max-w-[320px];
+  @apply w-max min-w-[200px] max-w-[480px];
   @apply bg-white dark:bg-dark-800;
   @apply rounded-xl;
   @apply border border-gray-200 dark:border-dark-700;
diff --git a/frontend/src/views/user/KeysView.vue b/frontend/src/views/user/KeysView.vue
index 307a43b6..284b23ae 100644
--- a/frontend/src/views/user/KeysView.vue
+++ b/frontend/src/views/user/KeysView.vue
@@ -102,7 +102,7 @@
                   t('keys.noGroup')
                 }}</span>
                 <svg
-                  class="h-3.5 w-3.5 text-gray-400 opacity-0 transition-opacity group-hover/dropdown:opacity-100"
+                  class="h-3.5 w-3.5 text-gray-400 opacity-60 transition-opacity group-hover/dropdown:opacity-100"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -955,7 +955,7 @@
       <div
         v-if="groupSelectorKeyId !== null && dropdownPosition"
         ref="dropdownRef"
-        class="animate-in fade-in slide-in-from-top-2 fixed z-[100000020] w-64 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 duration-200 dark:bg-dark-800 dark:ring-white/10"
+        class="animate-in fade-in slide-in-from-top-2 fixed z-[100000020] w-auto min-w-[280px] max-w-[480px] overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 duration-200 dark:bg-dark-800 dark:ring-white/10"
         style="pointer-events: auto !important;"
         :style="{ top: dropdownPosition.top + 'px', left: dropdownPosition.left + 'px' }"
       >