fix: icon picker keyboard interactions (#1666)

apps/nextjs/src/components/icons/picker/icon-picker.module.css

@@ -0,0 +1,3 @@
+[data-combobox-selected="true"] .iconCard {
+  border-color: var(--mantine-primary-color-6);
+}

apps/nextjs/src/components/icons/picker/icon-picker.tsx

@@ -20,6 +20,8 @@ import { useDebouncedValue } from "@mantine/hooks";
 import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
 
+import classes from "./icon-picker.module.css";
+
 interface IconPickerProps {
   initialValue?: string;
   onChange: (iconUrl: string) => void;
@@ -49,6 +51,13 @@ export const IconPicker = ({ initialValue, onChange, error, onFocus, onBlur }: I
   const totalOptions = data?.icons.reduce((acc, group) => acc + group.icons.length, 0) ?? 0;
   const groups = data?.icons.map((group) => {
     const options = group.icons.map((item) => (
+      <Combobox.Option
+        key={item.id}
+        value={item.url}
+        p={0}
+        h="calc(2*var(--mantine-spacing-sm)+25px)"
+        w="calc(2*var(--mantine-spacing-sm)+25px)"
+      >
         <UnstyledButton
           onClick={() => {
             const value = item.url;
@@ -60,7 +69,6 @@ export const IconPicker = ({ initialValue, onChange, error, onFocus, onBlur }: I
               combobox.closeDropdown();
             });
           }}
-        key={item.id}
         >
           <Indicator label="SVG" disabled={!item.url.endsWith(".svg")} size={16}>
             <Card
@@ -70,6 +78,7 @@ export const IconPicker = ({ initialValue, onChange, error, onFocus, onBlur }: I
                 overflow: "visible",
                 cursor: "pointer",
               }}
+              className={classes.iconCard}
               withBorder
             >
               <Box w={25} h={25}>
@@ -78,6 +87,7 @@ export const IconPicker = ({ initialValue, onChange, error, onFocus, onBlur }: I
             </Card>
           </Indicator>
         </UnstyledButton>
+      </Combobox.Option>
     ));
 
     return (