github/sub2api
1
0
Fork 0
mirror of https://github.com/Wei-Shaw/sub2api.git synced 2026-04-19 08:58:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): improve group selector dropdown width and visibility

Browse Source 
- 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
This commit is contained in:
bayma888
2026-02-09 18:14:50 +08:00
parent 03bf348530
commit 785115c62b
3 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/common/GroupOptionItem.vue
View File

@@ -13,7 +13,7 @@
/> />
<span <span
v-if="description" 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 }} {{ description }}
</span> </span>

2
frontend/src/components/common/Select.vue
View File

@@ -434,7 +434,7 @@ onUnmounted(() => {
<style> <style>
.select-dropdown-portal { .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 bg-white dark:bg-dark-800;
@apply rounded-xl; @apply rounded-xl;
@apply border border-gray-200 dark:border-dark-700; @apply border border-gray-200 dark:border-dark-700;

4
frontend/src/views/user/KeysView.vue
View File

@@ -102,7 +102,7 @@
t('keys.noGroup') t('keys.noGroup')
}}</span> }}</span>
<svg <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" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -955,7 +955,7 @@
<div <div
v-if="groupSelectorKeyId !== null && dropdownPosition" v-if="groupSelectorKeyId !== null && dropdownPosition"
ref="dropdownRef" 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="pointer-events: auto !important;"
:style="{ top: dropdownPosition.top + 'px', left: dropdownPosition.left + 'px' }" :style="{ top: dropdownPosition.top + 'px', left: dropdownPosition.left + 'px' }"
> >