fix: dropdown max-height and padding bottom (#8167)

Fixes: #6105 

Also fixed side effect due to previous PR:

[Screencast from 2024-10-29
13-54-44.webm](https://github.com/user-attachments/assets/f15db853-ca1c-4be8-9362-610122c4d988)

Author: harshrajeevsingh

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

@@ -4,6 +4,7 @@ import {
   FloatingPortal,
   offset,
   Placement,
+  size,
   useFloating,
 } from '@floating-ui/react';
 import { MouseEvent, useEffect, useRef } from 'react';
@@ -85,7 +86,19 @@ export const Dropdown = ({
 
   const { refs, floatingStyles, placement } = useFloating({
     placement: dropdownPlacement,
-    middleware: [flip(), ...offsetMiddlewares],
+    middleware: [
+      flip(),
+      size({
+        padding: 12 + 20, // 12px for padding bottom, 20px for dropdown bottom margin target
+        apply: ({ availableHeight, elements }) => {
+          elements.floating.style.maxHeight =
+            availableHeight >= elements.floating.scrollHeight
+              ? ''
+              : `${availableHeight}px`;
+        },
+      }),
+      ...offsetMiddlewares,
+    ],
     whileElementsMounted: autoUpdate,
     strategy: dropdownStrategy,
   });

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

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