Fix filter multi select (#8682)

- Created a dropdown inside a dropdown for the
`ObjectFilterDropdownOperandDropdown` so the operand can be opened over
the selection with an offset
- Refactored dropdown component and introduced `DropdownUnmountEffect`
to close the dropdown when the component unmounts
- Removed old logic

Before:
<img width="216" alt="Capture d’écran 2024-11-22 à 14 03 58"
src="https://github.com/user-attachments/assets/3c1bba03-af03-4993-a070-f009b8dc876f">

After:
<img width="222" alt="Capture d’écran 2024-11-22 à 14 03 40"
src="https://github.com/user-attachments/assets/a8a784b4-8672-4b02-bb21-e4a749682f2e">

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx

@@ -49,6 +49,7 @@ type DropdownMenuHeaderProps = ComponentProps<'li'> & {
   EndIcon?: IconComponent;
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
   testId?: string;
+  className?: string;
 };
 
 export const DropdownMenuHeader = ({
@@ -57,12 +58,17 @@ export const DropdownMenuHeader = ({
   EndIcon,
   onClick,
   testId,
+  className,
 }: DropdownMenuHeaderProps) => {
   const theme = useTheme();
   return (
     <>
       {EndIcon && (
-        <StyledHeader data-testid={testId} onClick={onClick}>
+        <StyledHeader
+          data-testid={testId}
+          onClick={onClick}
+          className={className}
+        >
           <StyledChildrenWrapper>{children}</StyledChildrenWrapper>
           <StyledEndIcon>
             <EndIcon size={theme.icon.size.md} />
@@ -70,7 +76,7 @@ export const DropdownMenuHeader = ({
         </StyledHeader>
       )}
       {StartIcon && (
-        <StyledHeader data-testid={testId}>
+        <StyledHeader data-testid={testId} className={className}>
           <LightIconButton
             testId="dropdown-menu-header-end-icon"
             Icon={StartIcon}