refac

src/lib/components/common/Dropdown.svelte

@@ -20,6 +20,9 @@
 	/** CSS classes for the dropdown content container */
 	export let contentClass = '';
 
+	/** Max height for the dropdown content */
+	export let maxHeight = '18rem';
+
 	/** Side offset in px */
 	export let sideOffset = 4;
 
@@ -187,6 +190,8 @@
 		bind:this={contentEl}
 		class={contentClass}
 		role="menu"
+		style:max-height={maxHeight}
+		style:overflow-y="auto"
 		transition:flyAndScale
 		on:click={(e) => e.stopPropagation()}
 		on:pointerdown={(e) => e.stopPropagation()}

src/lib/components/common/Select.svelte

@@ -24,6 +24,9 @@
 	export let contentClass =
 		'rounded-2xl min-w-[170px] p-1 border border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-850 dark:text-white shadow-lg';
 
+	/** Max height for the dropdown content */
+	export let maxHeight = '18rem';
+
 	/** CSS classes for each item button */
 	export let itemClass =
 		'flex w-full gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl';
@@ -123,7 +126,14 @@
 </button>
 
 {#if open}
-	<div use:portal bind:this={contentEl} class={contentClass} transition:flyAndScale>
+	<div
+		use:portal
+		bind:this={contentEl}
+		class={contentClass}
+		style:max-height={maxHeight}
+		style:overflow-y="auto"
+		transition:flyAndScale
+	>
 		<slot {open} {selectItem}>
 			{#each items as item}
 				<button class={itemClass} type="button" on:click={() => selectItem(item)}>