Fixed many dropdown bugs (#8256)

Many dropdown bugs have been fixed, more refactoring is needed.

Dropdown fixed : 
- Filter select
- Sort select
- Visible field select
- Hidden field select
- Multi item picker (phones, links, emails, etc.)
- Phone country select

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

@@ -7,7 +7,7 @@ import {
   size,
   useFloating,
 } from '@floating-ui/react';
-import { MouseEvent, useEffect, useRef } from 'react';
+import { MouseEvent, ReactNode, useRef } from 'react';
 import { Keys } from 'react-hotkeys-hook';
 import { Key } from 'ts-key-enum';
 
@@ -27,8 +27,8 @@ import { DropdownOnToggleEffect } from './DropdownOnToggleEffect';
 
 type DropdownProps = {
   className?: string;
-  clickableComponent?: JSX.Element | JSX.Element[];
-  dropdownComponents: JSX.Element | JSX.Element[];
+  clickableComponent?: ReactNode;
+  dropdownComponents: ReactNode;
   hotkey?: {
     key: Keys;
     scope: string;
@@ -65,13 +65,8 @@ export const Dropdown = ({
 }: DropdownProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const {
-    isDropdownOpen,
-    toggleDropdown,
-    closeDropdown,
-    dropdownWidth,
-    setDropdownPlacement,
-  } = useDropdown(dropdownId);
+  const { isDropdownOpen, toggleDropdown, closeDropdown, dropdownWidth } =
+    useDropdown(dropdownId);
 
   const offsetMiddlewares = [];
 
@@ -83,18 +78,21 @@ export const Dropdown = ({
     offsetMiddlewares.push(offset({ mainAxis: dropdownOffset.y }));
   }
 
-  const { refs, floatingStyles, placement } = useFloating({
+  const { refs, floatingStyles } = useFloating({
     placement: dropdownPlacement,
     middleware: [
       flip(),
       size({
-        padding: 12 + 20, // 12px for padding bottom, 20px for dropdown bottom margin target
+        padding: 32,
         apply: ({ availableHeight, elements }) => {
           elements.floating.style.maxHeight =
             availableHeight >= elements.floating.scrollHeight
               ? ''
               : `${availableHeight}px`;
+
+          elements.floating.style.height = 'auto';
         },
+        boundary: document.querySelector('#root') ?? undefined,
       }),
       ...offsetMiddlewares,
     ],
@@ -102,10 +100,6 @@ export const Dropdown = ({
     strategy: dropdownStrategy,
   });
 
-  useEffect(() => {
-    setDropdownPlacement(placement);
-  }, [placement, setDropdownPlacement]);
-
   const handleHotkeyTriggered = () => {
     toggleDropdown();
   };

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

@@ -23,10 +23,10 @@ const StyledDropdownMenu = styled.div<{
 
   display: flex;
 
+  height: 100%;
+
   flex-direction: column;
   z-index: 30;
-  overflow-y: auto;
-  overflow-x: hidden;
   width: ${({ width = 160 }) =>
     typeof width === 'number' ? `${width}px` : width};
 `;

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

@@ -13,7 +13,6 @@ const StyledDropdownMenuItemsExternalContainer = styled.div<{
   flex-direction: column;
   gap: 2px;
   max-height: ${({ hasMaxHeight }) => (hasMaxHeight ? '188px' : 'none')};
-  overflow-y: auto;
 
   padding: var(--padding);
 
@@ -34,6 +33,8 @@ const StyledDropdownMenuItemsInternalContainer = styled.div`
   width: 100%;
 `;
 
+// TODO: refactor this, the dropdown should handle the max height behavior + scroll with the size middleware
+// We should instead create a DropdownMenuItemsContainerScrollable or take for granted that it is the default behavior
 export const DropdownMenuItemsContainer = ({
   children,
   hasMaxHeight,