From edd152910d7c16ca0ba839ba32bdbf366587f6c1 Mon Sep 17 00:00:00 2001
From: brendanlaschke <brendan.laschke@googlemail.com>
Date: Fri, 10 Nov 2023 11:52:50 +0100
Subject: [PATCH] Fix icon picker width and add Icon Title (#2418)

- fixed icon picker width
- added icon title
---
 .../modules/ui/input/button/components/LightIconButton.tsx    | 4 +++-
 front/src/modules/ui/input/components/IconPicker.tsx          | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/front/src/modules/ui/input/button/components/LightIconButton.tsx b/front/src/modules/ui/input/button/components/LightIconButton.tsx
index 33198bf0c..db6317547 100644
--- a/front/src/modules/ui/input/button/components/LightIconButton.tsx
+++ b/front/src/modules/ui/input/button/components/LightIconButton.tsx
@@ -18,7 +18,7 @@ export type LightIconButtonProps = {
   disabled?: boolean;
   focus?: boolean;
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-} & Pick<ComponentProps<'button'>, 'aria-label'>;
+} & Pick<ComponentProps<'button'>, 'aria-label' | 'title'>;
 
 const StyledButton = styled.button<
   Pick<LightIconButtonProps, 'accent' | 'active' | 'size' | 'focus'>
@@ -90,6 +90,7 @@ export const LightIconButton = ({
   disabled = false,
   focus = false,
   onClick,
+  title,
 }: LightIconButtonProps) => {
   const theme = useTheme();
   return (
@@ -103,6 +104,7 @@ export const LightIconButton = ({
       className={className}
       size={size}
       active={active}
+      title={title}
     >
       {Icon && <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />}
     </StyledButton>
diff --git a/front/src/modules/ui/input/components/IconPicker.tsx b/front/src/modules/ui/input/components/IconPicker.tsx
index dd7baf469..fadb2acc9 100644
--- a/front/src/modules/ui/input/components/IconPicker.tsx
+++ b/front/src/modules/ui/input/components/IconPicker.tsx
@@ -84,6 +84,7 @@ export const IconPicker = ({
             variant={variant}
           />
         }
+        dropdownMenuWidth={168}
         dropdownComponents={
           <DropdownMenu width={168}>
             <DropdownMenuSearchInput
@@ -103,6 +104,7 @@ export const IconPicker = ({
                       aria-label={convertIconKeyToLabel(iconKey)}
                       isSelected={selectedIconKey === iconKey}
                       size="medium"
+                      title={iconKey}
                       Icon={icons[iconKey]}
                       onClick={() => {
                         onChange({ iconKey, Icon: icons[iconKey] });