diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemDropdown.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemDropdown.tsx index 68c0989c62..5d59652e6c 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemDropdown.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemDropdown.tsx @@ -64,6 +64,10 @@ export const CommandMenuItemDropdown = ({ onOpen={() => { setSelectedItemId(id); }} + middlewareBoundaryPadding={{ + right: 0, + left: 0, + }} /> ); }; 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 c7696dae52..057707a3d2 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 @@ -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, }, }; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/constants/DropdownBoundaryBottomPaddingDesktop.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/constants/DropdownBoundaryBottomPaddingDesktop.ts new file mode 100644 index 0000000000..56a01682ea --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/constants/DropdownBoundaryBottomPaddingDesktop.ts @@ -0,0 +1 @@ +export const DROPDOWN_BOUNDARY_BOTTOM_PADDING_DESKTOP = 32; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/constants/DropdownBoundaryBottomPaddingMobile.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/constants/DropdownBoundaryBottomPaddingMobile.ts new file mode 100644 index 0000000000..4a9b2a4eb6 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/constants/DropdownBoundaryBottomPaddingMobile.ts @@ -0,0 +1 @@ +export const DROPDOWN_BOUNDARY_BOTTOM_PADDING_MOBILE = 64; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/constants/DropdownBoundaryHorizontalPadding.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/constants/DropdownBoundaryHorizontalPadding.ts new file mode 100644 index 0000000000..7817813c49 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/constants/DropdownBoundaryHorizontalPadding.ts @@ -0,0 +1 @@ +export const DROPDOWN_BOUNDARY_HORIZONTAL_PADDING = 32;