refac

src/lib/components/common/Dropdown.svelte

@@ -42,7 +42,6 @@
 	function trigger(node) {
 		triggerEl = node.firstElementChild || node;
 		function handleClick(e) {
-			e.stopPropagation();
 			e.preventDefault();
 			toggleOpen();
 		}
@@ -147,16 +146,19 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<span use:trigger style="display: contents;">
+<span use:trigger style="display: contents; cursor: pointer;">
 	<slot />
 </span>
 
 {#if show}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
 		use:portal
 		bind:this={contentEl}
 		class={contentClass}
 		transition:flyAndScale
+		on:click|stopPropagation
 	>
 		<slot name="content" />
 	</div>

src/lib/components/common/DropdownOptions.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
-	import { DropdownMenu } from 'bits-ui';
 
+	import Dropdown from '$lib/components/common/Dropdown.svelte';
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	const i18n = getContext('i18n');
 
@@ -20,19 +20,17 @@
 	let open = false;
 </script>
 
-<DropdownMenu.Root bind:open>
-	<DropdownMenu.Trigger>
-		<div
-			class={className
-				? className
-				: 'flex w-full items-center gap-2 truncate bg-transparent px-0.5 text-sm placeholder-gray-400 outline-hidden focus:outline-hidden'}
-		>
-			{items.find((item) => item.value === value)?.label ?? placeholder}
-			<ChevronDown className=" size-3" strokeWidth="2.5" />
-		</div>
-	</DropdownMenu.Trigger>
+<Dropdown bind:show={open} {align}>
+	<div
+		class={className
+			? className
+			: 'flex w-full items-center gap-2 truncate bg-transparent px-0.5 text-sm placeholder-gray-400 outline-hidden focus:outline-hidden'}
+	>
+		{items.find((item) => item.value === value)?.label ?? placeholder}
+		<ChevronDown className=" size-3" strokeWidth="2.5" />
+	</div>
 
-	<DropdownMenu.Content {align}>
+	<div slot="content">
 		<div
 			class="dark:bg-gray-850 z-50 w-full rounded-2xl border border-gray-100 bg-white p-1 shadow-lg dark:border-gray-800 dark:text-white"
 		>
@@ -58,5 +56,5 @@
 				</button>
 			{/each}
 		</div>
-	</DropdownMenu.Content>
-</DropdownMenu.Root>
+	</div>
+</Dropdown>

src/lib/components/common/DropdownSub.svelte

@@ -22,6 +22,15 @@
 		contentEl.style.position = 'fixed';
 		contentEl.style.zIndex = '99999';
 
+		// Inherit min-width from parent dropdown container
+		const parentContainer = triggerEl.closest('[class*="rounded"]')?.parentElement;
+		if (parentContainer) {
+			const parentWidth = parentContainer.offsetWidth;
+			if (parentWidth > 0) {
+				contentEl.style.minWidth = `${parentWidth}px`;
+			}
+		}
+
 		// Position to the right of the trigger
 		const rightSpace = window.innerWidth - rect.right;
 		const contentWidth = contentEl.offsetWidth || 200;