styling, and clickoutside handler

package-lock.json

@@ -19,6 +19,7 @@
 				"@skeletonlabs/skeleton-svelte": "^1.2.3",
 				"@supabase/ssr": "^0.6.1",
 				"@supabase/supabase-js": "^2.49.8",
+				"@svelte-put/clickoutside": "^4.0.0",
 				"@sveltejs/adapter-auto": "^6.0.0",
 				"@sveltejs/kit": "^2.16.0",
 				"@sveltejs/vite-plugin-svelte": "^5.0.0",
@@ -1445,6 +1446,16 @@
 				"@supabase/storage-js": "2.7.1"
 			}
 		},
+		"node_modules/@svelte-put/clickoutside": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/@svelte-put/clickoutside/-/clickoutside-4.0.0.tgz",
+			"integrity": "sha512-36lLICc+RB6t/Kw0L6fZKU/y/yAAx3P+SsI2BtYM1GUBaYytSFHBWMw1c3TQEWj7Y8SgY6H3JsfEd2flbNWhqA==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"svelte": "^5.1.0"
+			}
+		},
 		"node_modules/@sveltejs/acorn-typescript": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",

package.json

@@ -21,6 +21,7 @@
 		"@skeletonlabs/skeleton-svelte": "^1.2.3",
 		"@supabase/ssr": "^0.6.1",
 		"@supabase/supabase-js": "^2.49.8",
+		"@svelte-put/clickoutside": "^4.0.0",
 		"@sveltejs/adapter-auto": "^6.0.0",
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",

src/lib/components/ThemeSwitch.svelte

@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
 	import { Check, ChevronDown, Moon, Palette, Sun } from '@lucide/svelte';
+	import { clickoutside } from '@svelte-put/clickoutside';
 
 	// Available color themes
 	const colorThemes = [
@@ -115,7 +116,8 @@
 </button>
 
 <!-- Color Theme Selector -->
-<div class="relative">
+<div class="relative my-auto" use:clickoutside
+onclickoutside={() => (showDropdown = false)}>
 	<button
 		onclick={() => (showDropdown = !showDropdown)}
 		class="btn btn-sm flex h-8 items-center"
@@ -124,28 +126,31 @@
 		aria-expanded={showDropdown}
 	>
 		<Palette class="size-4" aria-hidden="true" />
-		<span class="capitalize hidden sm:block">{currentColorTheme}</span>
+		<span class="hidden capitalize sm:block">{currentColorTheme}</span>
-		<ChevronDown class={`size-4 transition-transform ${showDropdown === true ? 'rotate-180' : ''}`} aria-hidden="true" />
+		<ChevronDown
+			class={`size-4 transition-transform ${showDropdown === true ? 'rotate-180' : ''}`}
+			aria-hidden="true"
+		/>
 	</button>
 
 	{#if showDropdown}
 		<div
-			class="card preset-outlined-primary-500 bg-surface-50-950 absolute right-0 md:left-0 z-50 mt-2 w-24 sm:w-48 h-128 overflow-hidden rounded-container shadow-lg"
+			class="card preset-outlined-primary-500 bg-surface-50-950 rounded-container absolute right-0 z-50 mt-2 h-128 w-24 overflow-hidden shadow-lg sm:w-48 md:left-0"
 		>
-			<div class="flex flex-col gap-2 overflow-scroll h-full">
+			<div class="flex h-full flex-col gap-2 overflow-y-scroll">
-			{#each colorThemes as theme}
+				{#each colorThemes as theme}
-				<button
+					<button
-					onclick={() => selectColorTheme(theme.value)}
+						onclick={() => selectColorTheme(theme.value)}
-					class="btn btn-sm flex w-full items-center justify-between px-4 py-2 transition-colors"
+						class="btn btn-sm flex w-full items-center justify-between px-4 py-2 transition-colors"
-					aria-label="Select {theme.label} theme"
+						aria-label="Select {theme.label} theme"
-				>
+					>
-					<span>{theme.label}</span>
+						<span>{theme.label}</span>
-					{#if currentColorTheme === theme.value}
+						{#if currentColorTheme === theme.value}
-						<Check class="size-4" aria-hidden="true" />
+							<Check class="size-4" aria-hidden="true" />
-					{/if}
+						{/if}
-				</button>
+					</button>
-			{/each}
+				{/each}
-        </div>
+			</div>
 		</div>
 	{/if}
 </div>