Updated styles for SearchDialog.

Author: Hugos68

pnpm-lock.yaml

@@ -56,7 +56,7 @@
 	const classes = $derived(
 		{
 			drawer: `${commonClasses} top-0 left-0 right-0 bottom-0 h-screen w-fit max-w-[500px]`,
-			modal: `${commonClasses} top-4 md:top-[15%] left-1/2 -translate-x-1/2 w-[calc(100%-2rem)] max-w-[500px] rounded-md bg-surface-700`,
+			modal: `${commonClasses} top-4 md:top-[15%] left-1/2 -translate-x-1/2 w-[calc(100%-2rem)] max-w-[500px] rounded-md bg-surface-700 max-h-[75vh] max-w-[800px] overflow-auto`,
 		}[type],
 	);
 

src/docs/components/Dialog/Dialog.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import Dialog from '../Dialog/Dialog.svelte';
+	import Dialog from './Dialog.svelte';
 	import SearchIcon from 'lucide-svelte/icons/search';
+	import LoaderIcon from 'lucide-svelte/icons/loader';
 	import { page } from '$app/stores';
 
 	let open = $state(false);
@@ -13,7 +14,7 @@
 
 		// FIXME: https://github.com/sveltejs/eslint-plugin-svelte/issues/652
 		// eslint-disable-next-line svelte/valid-compile
-		const result = await $page.data.pagefind.search(query);
+		const result = await $page.data.pagefind.debouncedSearch(query, {}, 250);
 
 		if (result === null) {
 			return [];
@@ -56,30 +57,38 @@
 			/>
 			<SearchIcon class="absolute left-4 top-1/2 -translate-y-1/2" />
 		</div>
-		<div class="p-4 flex flex-col gap-1 max-h-[600px] overflow-auto min-h-[100px]" tabindex="-1">
-			{#await searchPromise then results}
-				{#if results.length > 0}
-					<p class="text-lg text-center">
-						Found {results.length}
-						{results.length === 1 ? 'result' : 'results'} for "{query}":
+		<div class="flex flex-col gap-1 p-4" tabindex="-1">
+			{#if query === ''}
+				<p class="text-lg text-center py-16">What can we help you find?</p>
+			{:else}
+				{#await searchPromise}
+					<p class="text-lg text-center py-16">
+						<LoaderIcon class="inline animate-spin" size={16} />
 					</p>
-					<nav>
-						<ul class="flex flex-col gap-4">
-							{#each results as result}
-								<li>
-									<a href={result.url.replace('.html', '')} class="text-xl font-semibold"
-										>{result.meta.title}</a
-									>
-									<!-- eslint-disable-next-line svelte/no-at-html-tags-->
-									<p class="text-sm line-clamp-2">{@html result.excerpt}</p>
-								</li>
-							{/each}
-						</ul>
-					</nav>
-				{:else if query !== ''}
-					<p class="text-lg text-center">No results found for "{query}"</p>
-				{/if}
-			{/await}
+				{:then results}
+					{#if results.length > 0}
+						<nav>
+							<ul class="space-y-4">
+								{#each results as result}
+									<li>
+										<a
+											href={result.url.replace('.html', '')}
+											class="block text-xl font-semibold hover:bg-surface-500 focus:bg-surface-500 transition p-1 rounded-md"
+										>
+											{result.meta.title}
+
+											<!-- eslint-disable-next-line svelte/no-at-html-tags-->
+											<p class="text-sm line-clamp-2">{@html result.excerpt}</p>
+										</a>
+									</li>
+								{/each}
+							</ul>
+						</nav>
+					{:else if query !== ''}
+						<p class="text-lg text-center py-16">No results found for "{query}"</p>
+					{/if}
+				{/await}
+			{/if}
 		</div>
 	</div>
 </Dialog>

src/docs/components/PageHeader/SearchDialog.svelte renamed to src/docs/components/Dialog/SearchDialog.svelte

@@ -3,7 +3,7 @@
 
 	// Icons
 	import IconMenu from 'lucide-svelte/icons/menu';
-	import SearchDialog from './SearchDialog.svelte';
+	import SearchDialog from '../Dialog/SearchDialog.svelte';
 	import { getDrawer } from '$docs/stores.svelte.js';
 
 	const drawer = getDrawer();

src/docs/components/PageHeader/PageHeader.svelte

@@ -5,10 +5,10 @@ import pagefind from 'vite-plugin-pagefind';
 
 export default defineConfig({
 	plugins: [sveltekit(), svelteTesting(), pagefind()],
-	experimental: {
-		// Remove when https://github.com/sveltejs/vite-plugin-svelte/issues/909 is fixed
-		hmrPartialAccept: false,
-	},
+	// experimental: {
+	// 	// Remove when https://github.com/sveltejs/vite-plugin-svelte/issues/909 is fixed
+	// 	hmrPartialAccept: false,
+	// },
 	test: {
 		include: ['./src/lib/**/*.{test,test.svelte}.{js,ts}'],
 		setupFiles: ['./src/vitest.setup.ts'],