From 4d014abfa9a95747e950c38b69bbfc267ccd9ba3 Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Tue, 23 Sep 2025 18:28:13 +0200
Subject: [PATCH] (stash) fix select dropdown animation teleporting from bottom
 to top

---
 .../components/select/SelectDropdown.svelte   | 90 ++++++++++---------
 1 file changed, 47 insertions(+), 43 deletions(-)

diff --git a/frontend/src/lib/components/select/SelectDropdown.svelte b/frontend/src/lib/components/select/SelectDropdown.svelte
index 6a76708bb0..589975d8b8 100644
--- a/frontend/src/lib/components/select/SelectDropdown.svelte
+++ b/frontend/src/lib/components/select/SelectDropdown.svelte
@@ -113,56 +113,60 @@
 			transition:slide={{ duration: 150 }}
 			class={twMerge(
 				disablePortal ? 'absolute' : 'fixed',
-				'flex flex-col z-[5001] max-h-64 overflow-clip bg-surface-secondary text-tertiary text-sm select-none border rounded-md shadow-lg',
+				'z-[5001] bg-surface-secondary text-tertiary text-sm select-none',
 				className
 			)}
 			style="{`top: ${dropdownPos.y}px; left: ${dropdownPos.x}px;`} {listAutoWidth
 				? `min-width: ${dropdownPos.width}px;`
 				: ''}"
-			bind:this={listEl}
 		>
-			{@render header?.()}
-			{#if processedItems?.length === 0}
-				<div class="py-8 px-4 text-center text-primary">{noItemsMsg}</div>
-			{/if}
-			<ul class={twMerge('flex-1 overflow-y-auto flex flex-col', ulClass)}>
-				{#each processedItems ?? [] as item, itemIndex}
-					{#if (item.__select_group && itemIndex === 0) || processedItems?.[itemIndex - 1]?.__select_group !== item.__select_group}
-						<li
-							class={twMerge(
-								'mx-4 pb-1 mb-2 text-xs font-semibold text-primary border-b',
-								itemIndex === 0 ? 'mt-3' : 'mt-6'
-							)}
-						>
-							{item.__select_group}
+			<div
+				bind:this={listEl}
+				class="flex flex-col max-h-64 border rounded-md shadow-lg overflow-clip"
+			>
+				{@render header?.()}
+				{#if processedItems?.length === 0}
+					<div class="py-8 px-4 text-center text-primary">{noItemsMsg}</div>
+				{/if}
+				<ul class={twMerge('flex-1 overflow-y-auto flex flex-col', ulClass)}>
+					{#each processedItems ?? [] as item, itemIndex}
+						{#if (item.__select_group && itemIndex === 0) || processedItems?.[itemIndex - 1]?.__select_group !== item.__select_group}
+							<li
+								class={twMerge(
+									'mx-4 pb-1 mb-2 text-xs font-semibold text-primary border-b',
+									itemIndex === 0 ? 'mt-3' : 'mt-6'
+								)}
+							>
+								{item.__select_group}
+							</li>
+						{/if}
+						<li>
+							<button
+								class={twMerge(
+									'py-2 px-4 w-full font-normal text-left text-primary',
+									itemIndex === keyArrowPos ? 'bg-surface-hover' : '',
+									item.value === value ? 'bg-surface-selected' : 'hover:bg-surface-hover',
+									itemButtonWrapperClasses
+								)}
+								onclick={(e) => {
+									e.stopImmediatePropagation()
+									onSelectValue(item)
+								}}
+							>
+								{@render startSnippet?.({ item, close: () => (open = false) })}
+								<span class={itemLabelWrapperClasses}>
+									{item.label || '\xa0'}
+								</span>
+								{@render endSnippet?.({ item, close: () => (open = false) })}
+								{#if item.subtitle}
+									<div class="text-xs text-tertiary">{item.subtitle}</div>
+								{/if}
+							</button>
 						</li>
-					{/if}
-					<li>
-						<button
-							class={twMerge(
-								'py-2 px-4 w-full font-normal text-left text-primary',
-								itemIndex === keyArrowPos ? 'bg-surface-hover' : '',
-								item.value === value ? 'bg-surface-selected' : 'hover:bg-surface-hover',
-								itemButtonWrapperClasses
-							)}
-							onclick={(e) => {
-								e.stopImmediatePropagation()
-								onSelectValue(item)
-							}}
-						>
-							{@render startSnippet?.({ item, close: () => (open = false) })}
-							<span class={itemLabelWrapperClasses}>
-								{item.label || '\xa0'}
-							</span>
-							{@render endSnippet?.({ item, close: () => (open = false) })}
-							{#if item.subtitle}
-								<div class="text-xs text-tertiary">{item.subtitle}</div>
-							{/if}
-						</button>
-					</li>
-				{/each}
-			</ul>
-			{@render bottomSnippet?.({ close: () => (open = false) })}
+					{/each}
+				</ul>
+				{@render bottomSnippet?.({ close: () => (open = false) })}
+			</div>
 		</div>
 	{/if}
 </ConditionalPortal>