From e648d942a2650c836d1aee7d08a654c454af3284 Mon Sep 17 00:00:00 2001
From: Harsh Singh <harshrajeevsingh@gmail.com>
Date: Mon, 28 Oct 2024 22:29:57 +0530
Subject: [PATCH] fix: dropdowns should have a max-height & padding from screen
 (#8055)

Fixes: #6105

### Problem

- The dropdown gets clipped when the number of filters increases.

### Solution

- Added scroll property to the ```DropdownMenu```
- Added size middleware to the floating UI hook.
- Provided padding of 20px to the size middleware, so that it maintains
distance from the bottom of the screen.

[Screencast from 2024-10-25
13-47-04.webm](https://github.com/user-attachments/assets/c2315ee2-6092-4c4a-8126-dba7ac3bf49b)

---------

Co-authored-by: martmull <martmull@hotmail.fr>
---
 .../layout/dropdown/components/Dropdown.tsx   | 22 +++++++++++++++----
 .../dropdown/components/DropdownMenu.tsx      |  2 ++
 2 files changed, 20 insertions(+), 4 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
index c6d5205e38..0f4c0e698d 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,9 +4,10 @@ import {
   FloatingPortal,
   offset,
   Placement,
+  size,
   useFloating,
 } from '@floating-ui/react';
-import { MouseEvent, useEffect, useRef } from 'react';
+import { MouseEvent, useEffect, useRef, useState } from 'react';
 import { Keys } from 'react-hotkeys-hook';
 import { Key } from 'ts-key-enum';
 
@@ -21,6 +22,7 @@ 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';
 
@@ -63,6 +65,9 @@ export const Dropdown = ({
   onOpen,
 }: DropdownProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
+  const [maxHeight, setMaxHeight] = useState<string | number | undefined>(
+    undefined,
+  );
 
   const {
     isDropdownOpen,
@@ -84,7 +89,16 @@ 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 }) => {
+          flushSync(() => setMaxHeight(availableHeight));
+        },
+      }),
+      ...offsetMiddlewares,
+    ],
     whileElementsMounted: autoUpdate,
     strategy: dropdownStrategy,
   });
@@ -155,7 +169,7 @@ export const Dropdown = ({
               width={dropdownMenuWidth ?? dropdownWidth}
               data-select-disable
               ref={refs.setFloating}
-              style={floatingStyles}
+              style={{ ...floatingStyles, maxHeight }}
             >
               {dropdownComponents}
             </DropdownMenu>
@@ -167,7 +181,7 @@ export const Dropdown = ({
             width={dropdownMenuWidth ?? dropdownWidth}
             data-select-disable
             ref={refs.setFloating}
-            style={floatingStyles}
+            style={{ ...floatingStyles, maxHeight }}
           >
             {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
index 5ac402f98e..d7b09e7fc1 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: scroll;
+  overflow-x: hidden;
   width: ${({ width = 160 }) =>
     typeof width === 'number' ? `${width}px` : width};
 `;