fix(Select): long options need to have max height with overflow

N00nDay · Nov 21, 2023 · 85578cb · 85578cb
1 parent 647d356
commit 85578cb
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/src/lib/components/select/Options.svelte b/src/lib/components/select/Options.svelte
@@ -34,10 +34,10 @@
 
 	let defaultClass = 'w-full bg-surface stwui-select-options';
 	$: if ($mobile) {
-		defaultClass += ' h-full p-3 space-y-1';
+		defaultClass += ' h-full p-3 space-y-1 overflow-y-auto';
 	} else {
 		defaultClass +=
-			' p-1 shadow-xl border border-border rounded-md origin-top-right absolute z-10 left-0 right-0';
+			' p-1 shadow-xl border border-border rounded-md origin-top-right absolute z-10 left-0 right-0 max-h-[256px] overflow-y-auto';
 	}
 	$: finalClass = twMerge(defaultClass, $$props.class);
 

diff --git a/src/routes/select/+page.svelte b/src/routes/select/+page.svelte
@@ -34,6 +34,22 @@
 		{
 			value: 'option_3',
 			label: 'Option 3'
+		},
+		{
+			value: 'option_4',
+			label: 'Option 4'
+		},
+		{
+			value: 'option_5',
+			label: 'Option 5'
+		},
+		{
+			value: 'option_6',
+			label: 'Option 6'
+		},
+		{
+			value: 'option_7',
+			label: 'Option 7'
 		}
 	];
 	const multipleOptions = [