Enhance Dropdown API to make portal usage optional (#6182)

Using a portal in dropdown systematically can be an issue in case we are
having dropdown within dropdown. The useClickOutside listener will be
triggered. It's easier to usePortal only in the case we really need
them, which is quite rare

packages/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts

@@ -1 +0,0 @@
-export const COLUMN_HEAD_DROPDOWN_ID = 'table-head-options-dropdown-id';

packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx

@@ -28,6 +28,7 @@ export const RecordTableColumnHeadWithDropdown = ({
       clickableComponent={<RecordTableColumnHead column={column} />}
       dropdownComponents={<RecordTableColumnHeadDropdownMenu column={column} />}
       dropdownOffset={{ x: -1 }}
+      usePortal
       dropdownPlacement="bottom-start"
       dropdownHotkeyScope={{ scope: column.fieldMetadataId + '-header' }}
     />

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

@@ -40,6 +40,7 @@ type DropdownProps = {
   dropdownStrategy?: 'fixed' | 'absolute';
   disableBlur?: boolean;
   onClickOutside?: () => void;
+  usePortal?: boolean;
   onClose?: () => void;
   onOpen?: () => void;
 };
@@ -56,6 +57,7 @@ export const Dropdown = ({
   dropdownStrategy = 'absolute',
   dropdownOffset = { x: 0, y: 0 },
   disableBlur = false,
+  usePortal = false,
   onClickOutside,
   onClose,
   onOpen,
@@ -131,7 +133,7 @@ export const Dropdown = ({
             onHotkeyTriggered={handleHotkeyTriggered}
           />
         )}
-        {isDropdownOpen && (
+        {isDropdownOpen && usePortal && (
           <FloatingPortal>
             <DropdownMenu
               disableBlur={disableBlur}
@@ -144,6 +146,17 @@ export const Dropdown = ({
             </DropdownMenu>
           </FloatingPortal>
         )}
+        {isDropdownOpen && !usePortal && (
+          <DropdownMenu
+            disableBlur={disableBlur}
+            width={dropdownMenuWidth ?? dropdownWidth}
+            data-select-disable
+            ref={refs.setFloating}
+            style={floatingStyles}
+          >
+            {dropdownComponents}
+          </DropdownMenu>
+        )}
         <DropdownOnToggleEffect
           onDropdownClose={onClose}
           onDropdownOpen={onOpen}