From c0484aa9a2914108ef479dc1d93dd7202bfacab2 Mon Sep 17 00:00:00 2001
From: Harsh Singh <harshrajeevsingh@gmail.com>
Date: Tue, 29 Oct 2024 15:30:35 +0530
Subject: [PATCH] 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)
---
 .../ui/layout/dropdown/components/Dropdown.tsx    | 15 ++++++++++++++-
 .../layout/dropdown/components/DropdownMenu.tsx   |  2 ++
 2 files changed, 16 insertions(+), 1 deletion(-)

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 c4d62a5600..ce7c7dbb45 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,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,
   });
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 5ac402f98e..8111b291b2 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,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};
 `;