From 85578cbfe017353782a4f845424e98a5b466bd39 Mon Sep 17 00:00:00 2001
From: Craig Howell <howell.craig@gmail.com>
Date: Tue, 21 Nov 2023 16:12:33 -0500
Subject: [PATCH] fix(Select): long options need to have max height with
 overflow

---
 src/lib/components/select/Options.svelte |  4 ++--
 src/routes/select/+page.svelte           | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/select/Options.svelte b/src/lib/components/select/Options.svelte
index d9c623b..85fd85b 100644
--- 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
index a4d2f36..d43a3af 100644
--- 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 = [