From e2bcb2cfbcee148dad7a68f969d8055191c983a0 Mon Sep 17 00:00:00 2001
From: Khalid Abdi <xamza2009@gmail.com>
Date: Fri, 12 Jun 2026 19:16:55 +0300
Subject: [PATCH] frontend: space command item icons from their labels

CommandItem rendered the icon flush against the label. Add a gap (and normalize
icon sizing) so the two no longer touch.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/components/ui/command.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/components/ui/command.tsx b/frontend/components/ui/command.tsx
index c2fb874..d4de3a0 100644
--- a/frontend/components/ui/command.tsx
+++ b/frontend/components/ui/command.tsx
@@ -212,7 +212,10 @@ export function CommandItem({
 }: React.ComponentProps<typeof AutocompleteItem>): React.ReactElement {
   return (
     <AutocompleteItem
-      className={cn("py-1.5", className)}
+      className={cn(
+        "gap-2 py-1.5 [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",
+        className,
+      )}
       data-slot="command-item"
       {...props}
     />