From d40e5a7404cc4bba64921333600b200ea4b0db45 Mon Sep 17 00:00:00 2001
From: Zoe <62722391+juls0730@users.noreply.github.com>
Date: Mon, 2 Mar 2026 00:12:28 -0600
Subject: [PATCH] feat: improve dropdowns a small bit

---
 app/components/Dropdown.vue      | 25 +++++++++++++++++++++----
 app/components/ModelSelector.vue | 10 +++++-----
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/app/components/Dropdown.vue b/app/components/Dropdown.vue
index 520d3a0..6fc00f2 100644
--- a/app/components/Dropdown.vue
+++ b/app/components/Dropdown.vue
@@ -18,13 +18,28 @@ const setTriggerRef = (el: any) => {
     }
 };
 
-const { floatingStyles } = useFloating(triggerRef, dropdownRef, {
+const { floatingStyles, placement } = useFloating(triggerRef, dropdownRef, {
     placement: props.placement ?? 'bottom-start',
     whileElementsMounted: autoUpdate,
     middleware: [offset(6), flip(), shift({ padding: 10 })],
     transform: false,
 });
 
+const transformOrigin = computed(() => {
+    switch (placement.value.split('-')[0]) {
+        case 'top':
+            return 'transform-origin-bottom-center';
+        case 'bottom':
+            return 'transform-origin-top-center';
+        case 'left':
+            return 'transform-origin-right-center';
+        case 'right':
+            return 'transform-origin-left-center';
+        default:
+            return 'transform-origin-bottom-center';
+    }
+});
+
 const toggle = () => (isOpen.value = !isOpen.value);
 const close = () => (isOpen.value = false);
 
@@ -35,11 +50,13 @@ defineExpose({ close });
     <slot :setRef="setTriggerRef" :isOpen="isOpen" :toggle="toggle" />
 
     <Teleport to="body">
-        <Transition enter-active-class="transition-[opacity,transform] duration-150 ease-out"
+        <Transition
+            enter-active-class="transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
             enter-from-class="opacity-0 scale-95" enter-to-class="opacity-100 scale-100"
-            leave-active-class="transition-[opacity,transform] duration-100 ease-in"
+            leave-active-class="transition-[opacity,transform] duration-100 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
             leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
-            <div v-if="isOpen" ref="dropdownRef" :style="floatingStyles" class="fixed z-9999" :class="dropdownClass">
+            <div v-if="isOpen" ref="dropdownRef" :style="floatingStyles" class="fixed z-9999"
+                :class="[dropdownClass, transformOrigin]">
                 <div v-click-outside="close"
                     class="bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 shadow-xl flex flex-col gap-1">
                     <slot name="dropdown" :close="close" />
diff --git a/app/components/ModelSelector.vue b/app/components/ModelSelector.vue
index 368268a..8115ae6 100644
--- a/app/components/ModelSelector.vue
+++ b/app/components/ModelSelector.vue
@@ -217,10 +217,11 @@ onUnmounted(() => {
             leave-active-class="transition-[opacity,transform] duration-100 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
             leave-from-class="opacity-100 scale-100 translate-y-0" leave-to-class="opacity-0 scale-95 translate-y-1">
             <KeepAlive>
-                <div v-if="isOpen" ref="dropdownContent" role="listbox" aria-label="Select model"
+                <div v-if="isOpen" v-click-outside="closeDropdown" ref="dropdownContent" role="listbox"
+                    aria-label="Select model"
                     :aria-activedescendant="focusedOptionId ? `model-option-${focusedOptionId}` : undefined"
                     :style="floatingStyles"
-                    class="fixed z-50 max-w-[420px] min-w-[280px] flex flex-col rounded-xl border border-[var(--color-border)] bg-[var(--bg-surface)] shadow-lg overflow-hidden"
+                    class="fixed z-30 w-full max-w-[420px] min-w-[280px] flex flex-col rounded-xl border border-[var(--color-border)] bg-[var(--bg-surface)] shadow-lg overflow-hidden"
                     :class="transformOrigin">
 
                     <div class="relative">
@@ -231,8 +232,7 @@ onUnmounted(() => {
                             class="placeholder:text-[var(--text-tertiary)] w-full pl-9 pr-3 py-2 text-sm text-[var(--text-primary)] bg-transparent placeholder-[var(--text-secondary)] outline-none" />
                     </div>
 
-                    <div v-click-outside="closeDropdown"
-                        class="flex-1 overflow-y-auto [scrollbar-width:thin] py-2 select-none">
+                    <div class="flex-1 overflow-y-auto [scrollbar-width:thin] py-2 select-none">
                         <div v-if="filteredProviders.length === 0"
                             class="px-4 py-8 text-center text-sm text-[var(--text-secondary)]">
                             No models found
@@ -243,7 +243,7 @@ onUnmounted(() => {
                                 class="px-4 py-1.5 text-[13px] font-medium text-[var(--text-secondary)] capitalize tracking-wider flex justify-between">
                                 {{ provider.name }}
                                 <button
-                                    @click="openDialog(DialogType.Settings, undefined, { page: 'providers', params: provider.id })"
+                                    @click="closeDropdown(); openDialog(DialogType.Settings, undefined, { page: 'providers', params: provider.id })"
                                     class="flex h-5 w-5 items-center justify-center hover:bg-[var(--color-hover)] rounded transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
                                     <span class="i-mynaui-cog-four text-4"></span>
                                 </button>