feat: improve dropdowns a small bit

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" />