Refactor and fixes dropdown bugs (#8807)

Fixes https://github.com/twentyhq/twenty/issues/8788
Fixes https://github.com/twentyhq/twenty/issues/8793
Fixes https://github.com/twentyhq/twenty/issues/8791
Fixes https://github.com/twentyhq/twenty/issues/8890
Fixes https://github.com/twentyhq/twenty/issues/8893

- [x] Also : 

Icon buttons under dropdown are visible without blur : 

![Capture d’écran du 2024-11-29
15-09-53](https://github.com/user-attachments/assets/f563333d-4e43-4ded-acc7-62e116004ed9)

- [x] Also : 

<img width="237" alt="image"
src="https://github.com/user-attachments/assets/e4c70936-beff-4481-89cb-0a32a36e0ee2">

- [x] Also : 

<img width="335" alt="image"
src="https://github.com/user-attachments/assets/5be60395-6baf-49eb-8d40-197add049e20">

- [x] Also : 

<img width="287" alt="image"
src="https://github.com/user-attachments/assets/a317561f-7986-4d70-a1c0-deee4f4e268a">

- Button create new without padding
- Container is expanding

- [x] Also : 

<img width="303" alt="image"
src="https://github.com/user-attachments/assets/09f8a27f-91db-4191-acdc-aaaeedaf6da5">

- [x] Also : 

<img width="133" alt="image"
src="https://github.com/user-attachments/assets/fe17b32e-f7a4-46c4-8040-239eaf8198e8">

Font is cut at bottom ?

- [x] Also : 

<img width="385" alt="image"
src="https://github.com/user-attachments/assets/7bab2092-2936-4112-a2ee-d32d6737e304">

The component should flip and not resize in this situation

- [x] Also : 

<img width="244" alt="image"
src="https://github.com/user-attachments/assets/5384f49a-71f9-4638-a60c-158cc8c83f81">

- [x] Also : 


![image](https://github.com/user-attachments/assets/9cd1f43a-df59-401e-9a41-bdb8e93ebe58)

packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandableList.tsx

@@ -4,7 +4,6 @@ import { AnimatedContainer, Chip, ChipVariant } from 'twenty-ui';
 
 import { ExpandedListDropdown } from '@/ui/layout/expandable-list/components/ExpandedListDropdown';
 import { isFirstOverflowingChildElement } from '@/ui/layout/expandable-list/utils/isFirstOverflowingChildElement';
-import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from '~/utils/isDefined';
 
 const StyledContainer = styled.div`
@@ -101,20 +100,18 @@ export const ExpandableList = ({
     resetFirstHiddenChildIndex();
   }, [isChipCountDisplayed, children.length, resetFirstHiddenChildIndex]);
 
-  useListenClickOutside({
-    refs: [containerRef],
-    callback: () => {
-      // Handle container resize
-      if (
-        childrenContainerElement?.clientWidth !== previousChildrenContainerWidth
-      ) {
-        resetFirstHiddenChildIndex();
-        setPreviousChildrenContainerWidth(
-          childrenContainerElement?.clientWidth ?? 0,
-        );
-      }
-    },
-  });
+  const handleClickOutside = () => {
+    setIsListExpanded(false);
+
+    if (
+      childrenContainerElement?.clientWidth !== previousChildrenContainerWidth
+    ) {
+      resetFirstHiddenChildIndex();
+      setPreviousChildrenContainerWidth(
+        childrenContainerElement?.clientWidth ?? 0,
+      );
+    }
+  };
 
   return (
     <StyledContainer
@@ -163,10 +160,7 @@ export const ExpandableList = ({
       {isListExpanded && (
         <ExpandedListDropdown
           anchorElement={containerRef.current ?? undefined}
-          onClickOutside={() => {
-            resetFirstHiddenChildIndex();
-            setIsListExpanded(false);
-          }}
+          onClickOutside={handleClickOutside}
           withBorder={withExpandedListBorder}
         >
           {children}

packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedListDropdown.tsx

@@ -46,8 +46,11 @@ export const ExpandedListDropdown = ({
   });
 
   useListenClickOutside({
-    refs: [refs.floating],
-    callback: onClickOutside ?? (() => {}),
+    refs: [refs.domReference],
+    callback: () => {
+      onClickOutside?.();
+    },
+    listenerId: 'expandable-list',
   });
 
   return (