Fix icon picker width and add Icon Title (#2418)

- fixed icon picker width
- added icon title

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>

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] });