more

src/lib/components/shared/command/command-list.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { Icons } from '$lib/assets/icons';
 	import { Badge } from '$lib/components/ui/badge';
-	import { aside_items } from '$lib/config/sitemap';
-	import { cn } from '$lib/utils';
 	import * as Command from '$lib/components/ui/command';
+	import { aside_items } from '$lib/config/sitemap';
 	import { command_open_state } from '$lib/stores';
-	import { goto } from '$app/navigation';
+	import { cn } from '$lib/utils';
 
 	export let search: string;
 
@@ -19,10 +19,10 @@
 	};
 </script>
 
-<Command.List class={cn('max-h-none px-1 pb-1 sm:h-[436px]', className)} {...$$restProps}>
+<Command.List class={cn('px-1 pb-1', className)} {...$$restProps}>
 	<Command.Empty class="text-gray-600">
 		No results found for
-		<span class="text-gray-1000">
+		<span class="font-semibold text-gray-1000">
 			"{search}"
 		</span>.
 	</Command.Empty>

src/lib/components/shared/command/command.svelte

@@ -23,7 +23,7 @@
 {#if $is_desktop}
 	<Command.Dialog
 		bind:open={$command_open_state}
-		class="w-full max-w-[640px] p-0"
+		class="top-[43%] max-w-[640px] sm:rounded-xl"
 		close_button="esc"
 	>
 		<Command.Input
@@ -32,19 +32,19 @@
 			bind:value={search}
 			class="h-[53px] p-0 px-1 text-lg"
 		/>
-		<CommandList {search} />
+		<CommandList {search} class="h-[436px] max-h-none" />
 	</Command.Dialog>
 {:else}
 	<Drawer.Root bind:open={$command_open_state}>
 		<Drawer.Content class="h-3/4" hide_dismiss_bar>
 			<Command.Root>
-				<Drawer.Header class="flex h-[53px] place-items-center justify-between border-b px-2">
+				<Drawer.Header class="flex h-[53px] items-center justify-between border-b px-2">
 					<Command.Input
 						hide_search_icon
 						placeholder="Search..."
 						class="h-7 flex-grow border-none text-lg"
 						bind:value={search}
-						wrapper_class="border-none w-full flex place-items-center"
+						wrapper_class="border-none w-full flex items-center"
 					/>
 					<Button
 						on:click={command_open_state.toggle}
@@ -55,7 +55,7 @@
 						Esc
 					</Button>
 				</Drawer.Header>
-				<CommandList {search} style="height: calc(74svh - 53px);" />
+				<CommandList {search} class="max-h-full" />
 			</Command.Root>
 		</Drawer.Content>
 	</Drawer.Root>

src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -13,7 +13,7 @@
 	export { className as class };
 </script>
 
-<!-- TODO: Messed up when I removed opacity modifiers. 🤦‍♂️ i.e. being able to do `bg-background-200/80`. And Tailwind v4 will deprecate the `opacity` utility class. A resolution will require re-writing the tokens in app.css -->
+<!-- TODO: Messed up when I removed opacity modifiers. 🤦‍♂️ i.e. being able to do `bg-background-200/80`. And Tailwind v4 will deprecate the `opacity` utility class. A resolution will require re-writing the tokens in app.css because doing `opacity-80` doesn't show the blur, for example. -->
 <DialogPrimitive.Overlay
 	{transition}
 	{transitionConfig}