houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add middleware boundary padding as a prop in dropdown (#15011)

Browse Source 
Add middleware boundary padding as a prop in dropdown + fix bottom end
placement in graph editor
This commit is contained in:
Raphaël Bosi
2025-10-09 16:18:22 +02:00
committed by GitHub
parent d2ed2ad7b9
commit ef8cd0ed19
5 changed files with 26 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/command-menu/components/CommandMenuItemDropdown.tsx
+4
View File
@@ -64,6 +64,10 @@ export const CommandMenuItemDropdown = ({
onOpen={() => {
setSelectedItemId(id);
}}
middlewareBoundaryPadding={{
right: 0,
left: 0,
}}
/>
);
};
packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
+19 -3
View File
@@ -1,5 +1,8 @@
import { DropdownOnToggleEffect } from '@/ui/layout/dropdown/components/DropdownOnToggleEffect';
import { DropdownInternalContainer } from '@/ui/layout/dropdown/components/internal/DropdownInternalContainer';
import { DROPDOWN_BOUNDARY_BOTTOM_PADDING_DESKTOP } from '@/ui/layout/dropdown/constants/DropdownBoundaryBottomPaddingDesktop';
import { DROPDOWN_BOUNDARY_BOTTOM_PADDING_MOBILE } from '@/ui/layout/dropdown/constants/DropdownBoundaryBottomPaddingMobile';
import { DROPDOWN_BOUNDARY_HORIZONTAL_PADDING } from '@/ui/layout/dropdown/constants/DropdownBoundaryHorizontalPadding';
import { DROPDOWN_RESIZE_MIN_HEIGHT } from '@/ui/layout/dropdown/constants/DropdownResizeMinHeight';
import { DROPDOWN_RESIZE_MIN_WIDTH } from '@/ui/layout/dropdown/constants/DropdownResizeMinWidth';
import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
@@ -59,6 +62,12 @@ export type DropdownProps = {
excludedClickOutsideIds?: string[];
isDropdownInModal?: boolean;
disableClickForClickableComponent?: boolean;
middlewareBoundaryPadding?: {
right?: number;
left?: number;
bottomDesktop?: number;
bottomMobile?: number;
};
};
export const Dropdown = ({
@@ -77,6 +86,7 @@ export const Dropdown = ({
excludedClickOutsideIds,
isDropdownInModal = false,
disableClickForClickableComponent = false,
middlewareBoundaryPadding = {},
}: DropdownProps) => {
const isDropdownOpen = useRecoilComponentValue(
isDropdownOpenComponentState,
@@ -108,13 +118,19 @@ export const Dropdown = ({
);
const isMobile = useIsMobile();
const bottomAutoresizePadding = isMobile ? 64 : 32;
const bottomAutoresizePadding = isMobile
? (middlewareBoundaryPadding.bottomMobile ??
DROPDOWN_BOUNDARY_BOTTOM_PADDING_MOBILE)
: (middlewareBoundaryPadding.bottomDesktop ??
DROPDOWN_BOUNDARY_BOTTOM_PADDING_DESKTOP);
const boundaryOptions = {
boundary: document.querySelector('#root') ?? undefined,
padding: {
right: 32,
left: 32,
right:
middlewareBoundaryPadding.right ?? DROPDOWN_BOUNDARY_HORIZONTAL_PADDING,
left:
middlewareBoundaryPadding.left ?? DROPDOWN_BOUNDARY_HORIZONTAL_PADDING,
bottom: bottomAutoresizePadding,
},
};
packages/twenty-front/src/modules/ui/layout/dropdown/constants/DropdownBoundaryBottomPaddingDesktop.ts
+1
View File
@@ -0,0 +1 @@
export const DROPDOWN_BOUNDARY_BOTTOM_PADDING_DESKTOP = 32;
packages/twenty-front/src/modules/ui/layout/dropdown/constants/DropdownBoundaryBottomPaddingMobile.ts
+1
View File
@@ -0,0 +1 @@
export const DROPDOWN_BOUNDARY_BOTTOM_PADDING_MOBILE = 64;
packages/twenty-front/src/modules/ui/layout/dropdown/constants/DropdownBoundaryHorizontalPadding.ts
+1
View File
@@ -0,0 +1 @@
export const DROPDOWN_BOUNDARY_HORIZONTAL_PADDING = 32;