fix combo box

frontend/src/components/config/util.tsx

@@ -35,6 +35,7 @@ import {
   CommandGroup,
   CommandInput,
   CommandItem,
+  CommandList,
 } from "@ui/command";
 import { snake_case_to_upper_space_case } from "@lib/formatting";
 
@@ -194,21 +195,24 @@ export const ResourceSelector = ({
             value={input}
             onValueChange={setInput}
           />
-          <CommandEmpty className="flex justify-evenly items-center">
-            {`No ${type}s Found`}
-            <SearchX className="w-3 h-3" />
-          </CommandEmpty>
-          <CommandGroup>
-            {resources.map((resource) => (
-              <CommandItem
-                key={resource.id}
-                onSelect={() => onSelect && onSelect(resource.id)}
-                className="flex items-center justify-between"
-              >
-                <div className="p-1">{resource.name}</div>
-              </CommandItem>
-            ))}
-          </CommandGroup>
+          <CommandList>
+            <CommandEmpty className="flex justify-evenly items-center">
+              {`No ${type}s Found`}
+              <SearchX className="w-3 h-3" />
+            </CommandEmpty>
+            
+            <CommandGroup>
+              {resources.map((resource) => (
+                <CommandItem
+                  key={resource.id}
+                  onSelect={() => onSelect && onSelect(resource.id)}
+                  className="flex items-center justify-between"
+                >
+                  <div className="p-1">{resource.name}</div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
         </Command>
       </PopoverContent>
     </Popover>

frontend/src/components/omnibar.tsx

@@ -19,36 +19,6 @@ import { DeploymentComponents } from "./resources/deployment";
 import { BuildComponents } from "./resources/build";
 import { ServerComponents } from "./resources/server";
 
-const ResourceGroup = ({
-  type,
-  onSelect,
-}: {
-  type: UsableResource;
-  onSelect: (value: string) => void;
-}) => {
-  const data = useRead(`List${type}s`, {}).data;
-  const Components = ResourceComponents[type];
-
-  if (!data || !data.length) return
-
-  return (
-    <CommandGroup heading={`${type}s`}>
-      {data?.map(({ id }) => {
-        return (
-          <CommandItem
-            key={id}
-            className="flex items-center gap-2"
-            onSelect={() => onSelect(`/${type.toLowerCase()}s/${id}`)}
-          >
-            <Components.Icon id={id} />
-            <Components.Name id={id} />
-          </CommandItem>
-        );
-      })}
-    </CommandGroup>
-  );
-};
-
 export const Omnibar = () => {
   const [open, set] = useState(false);
   const navigate = useNavigate();
@@ -88,6 +58,7 @@ export const Omnibar = () => {
         <CommandInput placeholder="Type a command or search..." />
         <CommandList>
           <CommandEmpty>No results found.</CommandEmpty>
+          
           <CommandGroup>
             <CommandItem
               className="flex items-center gap-2"
@@ -132,3 +103,33 @@ export const Omnibar = () => {
     </>
   );
 };
+
+const ResourceGroup = ({
+  type,
+  onSelect,
+}: {
+  type: UsableResource;
+  onSelect: (value: string) => void;
+}) => {
+  const data = useRead(`List${type}s`, {}).data;
+  const Components = ResourceComponents[type];
+
+  if (!data || !data.length) return;
+
+  return (
+    <CommandGroup heading={`${type}s`}>
+      {data?.map(({ id }) => {
+        return (
+          <CommandItem
+            key={id}
+            className="flex items-center gap-2"
+            onSelect={() => onSelect(`/${type.toLowerCase()}s/${id}`)}
+          >
+            <Components.Icon id={id} />
+            <Components.Name id={id} />
+          </CommandItem>
+        );
+      })}
+    </CommandGroup>
+  );
+};

frontend/src/globals.css

@@ -52,7 +52,7 @@
     --muted: 220.1 40.1% 98.2%;
     --muted-foreground: 220.1 20.1% 40.2%;
 
-    --accent: 220.1 40.1% 98.2%;
+    --accent: 220.1 40.1% 90.2%;
     --accent-foreground: 220.1 40.1% 11.2%;
 
     --destructive: 0 80.1% 60.2%;

frontend/src/ui/command.tsx

@@ -115,7 +115,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
       className
     )}
     {...props}