fix: select dropdown transition

client/src/lib/ui/DateRangePicker.svelte

@@ -42,7 +42,7 @@
 		<div
 			class="bg-mantle border-surface-0 hover:border-surface-2 flex items-center rounded border pl-2 text-sm drop-shadow-md transition-all"
 		>
-			<div class="grow flex items-center justify-center">
+			<div class="flex grow items-center justify-center">
 				{#each ['start', 'end'] as const as type}
 					<DateRangePicker.Input {type}>
 						{#snippet children({ segments })}
@@ -72,7 +72,7 @@
 				{/each}
 			</div>
 			<DateRangePicker.Trigger
-				class="text-overlay-2 hover:bg-surface-0 grow flex justify-center items-center focus:outline-sky ml-1 cursor-pointer p-2 transition-all focus:outline focus:outline-offset-1"
+				class="text-overlay-2 hover:bg-surface-0 focus:outline-sky ml-1 flex grow cursor-pointer items-center justify-center p-2 transition-all focus:outline focus:outline-offset-1"
 			>
 				<Calendar size="20" />
 			</DateRangePicker.Trigger>

client/src/lib/ui/Select.svelte

@@ -2,6 +2,7 @@
 	import { cn } from '$lib/utils';
 	import { Check, ChevronsDown, ChevronsUp, ChevronsUpDown, X } from '@lucide/svelte';
 	import { Select } from 'bits-ui';
+	import { fade } from 'svelte/transition';
 
 	let {
 		value = $bindable('10'),
@@ -30,16 +31,23 @@
 >
 	<Select.Root type="single" {items} bind:value onValueChange={onchange}>
 		<Select.Trigger
-			class="focus:outline-sky data-placeholder:text-overlay-0 gap-2 inline-flex grow cursor-pointer select-none items-center justify-between rounded-l py-2 pl-2 text-sm transition-colors focus:outline focus:outline-offset-1"
+			class="focus:outline-sky data-placeholder:text-overlay-0 inline-flex grow cursor-pointer select-none items-center justify-between gap-2 rounded-l py-2 pl-2 text-sm transition-colors focus:outline focus:outline-offset-1"
 			aria-label={placeholder}
 		>
 			{selectedLabel}
 			<ChevronsUpDown class="text-overlay-0" size="20" />
 		</Select.Trigger>
 		<Select.Portal>
-			<Select.Content
-				class="focus-override border-surface-0 bg-mantle shadow-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 outline-hidden z-50 select-none rounded border p-1"
-				sideOffset={10}
+			<Select.Content forceMount>
+				{#snippet child({ wrapperProps, props, open })}
+					{#if open}
+						<div {...wrapperProps}>
+							<div
+								{...props}
+								class="border-surface-0 bg-mantle shadow-popover outline-hidden z-50 mt-1 select-none rounded border p-1"
+								transition:fade={{
+									duration: 100
+								}}
 							>
 								<Select.ScrollUpButton class="flex w-full items-center justify-center">
 									<ChevronsUp size="20" />
@@ -66,6 +74,10 @@
 								<Select.ScrollDownButton class="flex w-full items-center justify-center">
 									<ChevronsDown size="20" />
 								</Select.ScrollDownButton>
+							</div>
+						</div>
+					{/if}
+				{/snippet}
 			</Select.Content>
 		</Select.Portal>
 	</Select.Root>