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

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

Browse Source 
Reverts twentyhq/twenty#8055
This commit is contained in:
martmull 2024-10-29 09:54:16 +01:00 committed by GitHub
parent a725245c2f
commit 94f2e1067b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 4 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

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