Revert "fix: dropdowns should have a max-height & padding from screen (…

…#8055)" This reverts commit e648d94.
twentyhq · Oct 29, 2024 · d6a964c · d6a964c
1 parent a725245
commit d6a964c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 20 deletions.
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
@@ -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<HTMLDivElement>(null);
-  const [maxHeight, setMaxHeight] = useState<string | number | undefined>(
-    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}
             </DropdownMenu>
@@ -181,7 +167,7 @@ export const Dropdown = ({
             width={dropdownMenuWidth ?? dropdownWidth}
             data-select-disable
             ref={refs.setFloating}
-            style={{ ...floatingStyles, maxHeight }}
+            style={floatingStyles}
           >
             {dropdownComponents}
           </DropdownMenu>

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
@@ -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};
 `;