diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx index 0f4c0e698..c6d5205e3 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx @@ -4,10 +4,9 @@ import { FloatingPortal, offset, Placement, - size, useFloating, } from '@floating-ui/react'; -import { MouseEvent, useEffect, useRef, useState } from 'react'; +import { MouseEvent, useEffect, useRef } from 'react'; import { Keys } from 'react-hotkeys-hook'; import { Key } from 'ts-key-enum'; @@ -22,7 +21,6 @@ import { isDefined } from '~/utils/isDefined'; import { useDropdown } from '../hooks/useDropdown'; import { useInternalHotkeyScopeManagement } from '../hooks/useInternalHotkeyScopeManagement'; -import { flushSync } from 'react-dom'; import { DropdownMenu } from './DropdownMenu'; import { DropdownOnToggleEffect } from './DropdownOnToggleEffect'; @@ -65,9 +63,6 @@ export const Dropdown = ({ onOpen, }: DropdownProps) => { const containerRef = useRef(null); - const [maxHeight, setMaxHeight] = useState( - undefined, - ); const { isDropdownOpen, @@ -89,16 +84,7 @@ export const Dropdown = ({ const { refs, floatingStyles, placement } = useFloating({ placement: dropdownPlacement, - middleware: [ - flip(), - size({ - padding: 12 + 20, // 12px for padding bottom, 20px for dropdown bottom margin target - apply: ({ availableHeight }) => { - flushSync(() => setMaxHeight(availableHeight)); - }, - }), - ...offsetMiddlewares, - ], + middleware: [flip(), ...offsetMiddlewares], whileElementsMounted: autoUpdate, strategy: dropdownStrategy, }); @@ -169,7 +155,7 @@ export const Dropdown = ({ width={dropdownMenuWidth ?? dropdownWidth} data-select-disable ref={refs.setFloating} - style={{ ...floatingStyles, maxHeight }} + style={floatingStyles} > {dropdownComponents} @@ -181,7 +167,7 @@ export const Dropdown = ({ width={dropdownMenuWidth ?? dropdownWidth} data-select-disable ref={refs.setFloating} - style={{ ...floatingStyles, maxHeight }} + style={floatingStyles} > {dropdownComponents} diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx index d7b09e7fc..5ac402f98 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx @@ -25,8 +25,6 @@ const StyledDropdownMenu = styled.div<{ flex-direction: column; z-index: 30; - overflow-y: scroll; - overflow-x: hidden; width: ${({ width = 160 }) => typeof width === 'number' ? `${width}px` : width}; `;