twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-22 11:43:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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)
This commit is contained in:
Harsh Singh 2024-10-29 15:30:35 +05:30 committed by GitHub
parent f79e904dd6
commit c0484aa9a2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,
});

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

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