feat(Select): fixed collision issues

N00nDay · May 11, 2023 · 45f183e · 45f183e
1 parent 28a38e7
commit 45f183e
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/src/lib/components/select/Options.svelte b/src/lib/components/select/Options.svelte
@@ -2,7 +2,7 @@
 	import { scale } from 'svelte/transition';
 	import { twMerge } from 'tailwind-merge';
 	import { get_current_component, onMount, getContext } from 'svelte/internal';
-	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	import { floatingUI, forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
 	export let use: ActionArray = [];
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
@@ -31,7 +31,7 @@
 	}
 
 	const defaultClass =
-		'origin-top-right absolute z-10 border border-border left-0 right-0 w-full mt-1 p-1 rounded-md shadow-xl py-1 bg-surface';
+		'origin-top-right absolute z-10 border border-border left-0 right-0 w-full p-1 rounded-md shadow-xl py-1 bg-surface';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 
 	onMount(() => {
@@ -49,6 +49,7 @@
 	out:scale={{ start: 0.95, duration: 75 }}
 	use:useActions={use}
 	use:forwardEvents
+	use:floatingUI={{ placement: 'bottom-start', offset: 8 }}
 	{...exclude($$props, ['use', 'class'])}
 	role="listbox"
 >