From cba36af1e854ae9181413f9cf6a7826ce3b6171a Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Mon, 19 May 2025 16:37:51 +0200 Subject: [PATCH] Fix dropdown (#12126) In this PR: - deprecating listenClickOutside ComparePixel mode as this is not accurate. We were using to avoid portal issue with CompareHtmlRef mode but this is still an issue when portalled content overflows the container. - add ClickOutsideContext to specify excluded className so portal children can use it easily (part of the tooling) - fix stories - remove avoidPortal from dropdown as this was not used --- packages/twenty-front/.storybook/preview.tsx | 7 +- .../src/modules/app/components/App.tsx | 7 +- .../RecordDetailRelationSectionDropdown.tsx | 7 +- .../RecordTableColumnHeadDropdownMenu.tsx | 9 +- .../RecordTableColumnHeadWithDropdown.tsx | 9 +- .../layout/dropdown/components/Dropdown.tsx | 6 - .../dropdown/components/DropdownContent.tsx | 36 +--- .../ui/layout/modal/components/Modal.tsx | 63 ++++--- .../ModalHotkeysAndClickOutsideEffect.tsx | 8 +- .../__stories__/ConfirmationModal.stories.tsx | 80 ++++---- ...alClickOutsideListenerExcludedClassName.ts | 2 + .../contexts/ClickOutsideListenerContext.tsx | 10 + .../__tests__/useListenClickOutside.test.tsx | 55 +----- .../hooks/useListenClickOutside.ts | 177 +++--------------- .../components/ViewBarFilterDropdown.tsx | 1 - .../ViewBarFilterDropdownFieldSelectMenu.tsx | 2 +- 16 files changed, 153 insertions(+), 326 deletions(-) create mode 100644 packages/twenty-front/src/modules/ui/layout/modal/constants/ModalClickOutsideListenerExcludedClassName.ts create mode 100644 packages/twenty-front/src/modules/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext.tsx diff --git a/packages/twenty-front/.storybook/preview.tsx b/packages/twenty-front/.storybook/preview.tsx index a1bf0e32e..aaaf7405d 100644 --- a/packages/twenty-front/.storybook/preview.tsx +++ b/packages/twenty-front/.storybook/preview.tsx @@ -10,6 +10,7 @@ import { mockedUserJWT } from '../src/testing/mock-data/jwt'; import 'react-loading-skeleton/dist/skeleton.css'; import 'twenty-ui/style.css'; import { THEME_DARK, THEME_LIGHT, ThemeContextProvider } from 'twenty-ui/theme'; +import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext'; initialize({ onUnhandledRequest: async (request: Request) => { @@ -46,7 +47,11 @@ const preview: Preview = { return ( - + + + ); diff --git a/packages/twenty-front/src/modules/app/components/App.tsx b/packages/twenty-front/src/modules/app/components/App.tsx index fbc5ed335..ff8af27e9 100644 --- a/packages/twenty-front/src/modules/app/components/App.tsx +++ b/packages/twenty-front/src/modules/app/components/App.tsx @@ -5,6 +5,7 @@ import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary'; import { AppRootErrorFallback } from '@/error-handler/components/AppRootErrorFallback'; import { ExceptionHandlerProvider } from '@/error-handler/components/ExceptionHandlerProvider'; import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope'; +import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext'; import { i18n } from '@lingui/core'; import { I18nProvider } from '@lingui/react'; import { HelmetProvider } from 'react-helmet-async'; @@ -28,7 +29,11 @@ export const App = () => { - + + + diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdown.tsx index f2f6511c7..ed53e9127 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdown.tsx @@ -1,4 +1,3 @@ -import styled from '@emotion/styled'; import { useCallback, useContext } from 'react'; import { useRecoilValue } from 'recoil'; @@ -35,10 +34,6 @@ type RecordDetailRelationSectionDropdownProps = { loading: boolean; }; -const StyledAddDropdown = styled(Dropdown)` - margin-left: auto; -`; - export const RecordDetailRelationSectionDropdown = ({ loading, }: RecordDetailRelationSectionDropdownProps) => { @@ -196,7 +191,7 @@ export const RecordDetailRelationSectionDropdown = ({ return ( - ; }; +const StyledDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)` + z-index: ${({ theme }) => theme.lastLayerZIndex}; +`; + export const RecordTableColumnHeadDropdownMenu = ({ column, }: RecordTableColumnHeadDropdownMenuProps) => { @@ -102,7 +107,7 @@ export const RecordTableColumnHeadDropdownMenu = ({ const canHide = column.isLabelIdentifier !== true; return ( - + {isFilterable && ( )} - + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx index 769f57db6..4587ac49d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx @@ -2,7 +2,6 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata' import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { useToggleScrollWrapper } from '@/ui/utilities/scroll/hooks/useToggleScrollWrapper'; -import styled from '@emotion/styled'; import { useCallback } from 'react'; import { RecordTableColumnHead } from './RecordTableColumnHead'; import { RecordTableColumnHeadDropdownMenu } from './RecordTableColumnHeadDropdownMenu'; @@ -11,12 +10,6 @@ type RecordTableColumnHeadWithDropdownProps = { column: ColumnDefinition; }; -const StyledDropdown = styled(Dropdown)` - display: flex; - flex: 1; - z-index: ${({ theme }) => theme.lastLayerZIndex}; -`; - export const RecordTableColumnHeadWithDropdown = ({ column, }: RecordTableColumnHeadWithDropdownProps) => { @@ -34,7 +27,7 @@ export const RecordTableColumnHeadWithDropdown = ({ }, [toggleScrollXWrapper, toggleScrollYWrapper]); return ( - void; onClose?: () => void; onOpen?: () => void; - avoidPortal?: boolean; }; export const Dropdown = ({ - className, clickableComponent, dropdownComponents, dropdownWidth, @@ -74,7 +71,6 @@ export const Dropdown = ({ onClickOutside, onClose, onOpen, - avoidPortal, clickableComponentWidth = 'auto', }: DropdownProps) => { const { isDropdownOpen, toggleDropdown } = useDropdown(dropdownId); @@ -174,7 +170,6 @@ export const Dropdown = ({ )} {isDropdownOpen && ( )} { const { isDropdownOpen, closeDropdown, setDropdownPlacement } = useDropdown(dropdownId); @@ -121,30 +118,16 @@ export const DropdownContent = ({ maxWidth: dropdownMaxWidth, }; + const { excludeClassName } = useContext(ClickOutsideListenerContext); + return ( <> {hotkey && onHotkeyTriggered && ( )} - {avoidPortal ? ( - - - - {dropdownComponents} - - - - ) : ( - + + +
@@ -162,8 +144,8 @@ export const DropdownContent = ({ - - )} +
+ ); }; diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx index f8735536e..a956a4447 100644 --- a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx +++ b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx @@ -4,7 +4,9 @@ import { ModalHotkeyScope } from '@/ui/layout/modal/components/types/ModalHotkey import { ModalComponentInstanceContext } from '@/ui/layout/modal/contexts/ModalComponentInstanceContext'; import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpenedComponentState'; +import { MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_CLASS_NAME } from '@/ui/layout/modal/constants/ModalClickOutsideListenerExcludedClassName'; import { useModal } from '@/ui/layout/modal/hooks/useModal'; +import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { css, useTheme } from '@emotion/react'; @@ -225,36 +227,43 @@ export const Modal = ({ instanceId: modalId, }} > - - - + - {children} - - + + {children} + + + )} diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/ModalHotkeysAndClickOutsideEffect.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/ModalHotkeysAndClickOutsideEffect.tsx index 055bcda32..cbb9e649d 100644 --- a/packages/twenty-front/src/modules/ui/layout/modal/components/ModalHotkeysAndClickOutsideEffect.tsx +++ b/packages/twenty-front/src/modules/ui/layout/modal/components/ModalHotkeysAndClickOutsideEffect.tsx @@ -1,9 +1,7 @@ import { ModalHotkeyScope } from '@/ui/layout/modal/components/types/ModalHotkeyScope'; +import { MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_CLASS_NAME } from '@/ui/layout/modal/constants/ModalClickOutsideListenerExcludedClassName'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; -import { - ClickOutsideMode, - useListenClickOutside, -} from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; +import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; import { Key } from 'ts-key-enum'; type ModalHotkeysAndClickOutsideEffectProps = { @@ -41,13 +39,13 @@ export const ModalHotkeysAndClickOutsideEffect = ({ useListenClickOutside({ refs: [modalRef], + excludeClassNames: [MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_CLASS_NAME], listenerId: `MODAL_CLICK_OUTSIDE_LISTENER_ID_${modalId}`, callback: () => { if (isClosable && onClose !== undefined) { onClose(); } }, - mode: ClickOutsideMode.comparePixels, }); return null; diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/__stories__/ConfirmationModal.stories.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/__stories__/ConfirmationModal.stories.tsx index fcf6abea3..478f13a40 100644 --- a/packages/twenty-front/src/modules/ui/layout/modal/components/__stories__/ConfirmationModal.stories.tsx +++ b/packages/twenty-front/src/modules/ui/layout/modal/components/__stories__/ConfirmationModal.stories.tsx @@ -130,51 +130,51 @@ export const ConfirmWithEnterKey: Story = { }, }; -// export const CancelButtonClick: Story = { -// args: { -// modalId: 'confirmation-modal', -// title: 'Cancel Button Test', -// subtitle: 'Clicking the cancel button should close the modal', -// confirmButtonText: 'Confirm', -// onClose: closeMock, -// }, -// play: async ({ canvasElement }) => { -// const canvas = within(canvasElement); +export const CancelButtonClick: Story = { + args: { + modalId: 'confirmation-modal', + title: 'Cancel Button Test', + subtitle: 'Clicking the cancel button should close the modal', + confirmButtonText: 'Confirm', + onClose: closeMock, + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); -// await canvas.findByText('Cancel Button Test'); + await canvas.findByText('Cancel Button Test'); -// const cancelButton = await canvas.findByRole('button', { -// name: /Cancel/, -// }); -// await userEvent.click(cancelButton); + const cancelButton = await canvas.findByRole('button', { + name: /Cancel/, + }); + await userEvent.click(cancelButton); -// await waitFor(() => { -// expect(closeMock).toHaveBeenCalledTimes(1); -// }); -// }, -// }; + await waitFor(() => { + expect(closeMock).toHaveBeenCalledTimes(1); + }); + }, +}; -// export const ConfirmButtonClick: Story = { -// args: { -// modalId: 'confirmation-modal', -// title: 'Confirm Button Test', -// subtitle: 'Clicking the confirm button should trigger the confirm action', -// confirmButtonText: 'Confirm', -// onConfirmClick: confirmMock, -// }, -// play: async ({ canvasElement }) => { -// const canvas = within(canvasElement); +export const ConfirmButtonClick: Story = { + args: { + modalId: 'confirmation-modal', + title: 'Confirm Button Test', + subtitle: 'Clicking the confirm button should trigger the confirm action', + confirmButtonText: 'Confirm', + onConfirmClick: confirmMock, + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); -// await canvas.findByText('Confirm Button Test'); + await canvas.findByText('Confirm Button Test'); -// const confirmButton = await canvas.findByRole('button', { -// name: /Confirm/, -// }); + const confirmButton = await canvas.findByRole('button', { + name: /Confirm/, + }); -// await userEvent.click(confirmButton); + await userEvent.click(confirmButton); -// await waitFor(() => { -// expect(confirmMock).toHaveBeenCalledTimes(1); -// }); -// }, -// }; + await waitFor(() => { + expect(confirmMock).toHaveBeenCalledTimes(1); + }); + }, +}; diff --git a/packages/twenty-front/src/modules/ui/layout/modal/constants/ModalClickOutsideListenerExcludedClassName.ts b/packages/twenty-front/src/modules/ui/layout/modal/constants/ModalClickOutsideListenerExcludedClassName.ts new file mode 100644 index 000000000..848b5a6ea --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/modal/constants/ModalClickOutsideListenerExcludedClassName.ts @@ -0,0 +1,2 @@ +export const MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_CLASS_NAME = + 'modal-click-outside-listener-excluded'; diff --git a/packages/twenty-front/src/modules/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext.tsx b/packages/twenty-front/src/modules/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext.tsx new file mode 100644 index 000000000..a2bfb9f46 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext.tsx @@ -0,0 +1,10 @@ +import { createContext } from 'react'; + +type ClickOutsideListenerContextType = { + excludeClassName: string | undefined; +}; + +export const ClickOutsideListenerContext = + createContext({ + excludeClassName: undefined, + }); diff --git a/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useListenClickOutside.test.tsx b/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useListenClickOutside.test.tsx index 52dd5d064..e37dab118 100644 --- a/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useListenClickOutside.test.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useListenClickOutside.test.tsx @@ -1,16 +1,11 @@ import { fireEvent, renderHook } from '@testing-library/react'; -import React from 'react'; -import { act } from 'react-dom/test-utils'; +import React, { act } from 'react'; import { RecoilRoot } from 'recoil'; -import { - ClickOutsideMode, - useListenClickOutside, -} from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; +import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; import { isDefined } from 'twenty-shared/utils'; const containerRef = React.createRef(); -const nullRef = React.createRef(); const Wrapper = ({ children }: { children: React.ReactNode }) => ( @@ -41,28 +36,6 @@ describe('useListenClickOutside', () => { expect(callback).toHaveBeenCalled(); }); - it('should trigger the callback when clicking outside the specified ref with pixel comparison', async () => { - const callback = jest.fn(); - - renderHook( - () => - useListenClickOutside({ - refs: [nullRef], - callback, - mode: ClickOutsideMode.comparePixels, - listenerId, - }), - { wrapper: Wrapper }, - ); - - act(() => { - fireEvent.mouseDown(document); - fireEvent.click(document); - }); - - expect(callback).toHaveBeenCalled(); - }); - it('should not call the callback when clicking inside the specified refs using default comparison', () => { const callback = jest.fn(); @@ -85,28 +58,4 @@ describe('useListenClickOutside', () => { expect(callback).not.toHaveBeenCalled(); }); - - it('should not call the callback when clicking inside the specified refs using pixel comparison', () => { - const callback = jest.fn(); - - renderHook( - () => - useListenClickOutside({ - refs: [containerRef], - callback, - mode: ClickOutsideMode.comparePixels, - listenerId, - }), - { wrapper: Wrapper }, - ); - - act(() => { - if (isDefined(containerRef.current)) { - fireEvent.mouseDown(containerRef.current); - fireEvent.click(containerRef.current); - } - }); - - expect(callback).not.toHaveBeenCalled(); - }); }); diff --git a/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts b/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts index 57d76dd1e..371b2a397 100644 --- a/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts +++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts @@ -7,16 +7,10 @@ import { useRecoilCallback } from 'recoil'; const CLICK_OUTSIDE_DEBUG_MODE = false; -export enum ClickOutsideMode { - comparePixels = 'comparePixels', - compareHTMLRef = 'compareHTMLRef', -} - export type ClickOutsideListenerProps = { refs: Array>; excludeClassNames?: string[]; callback: (event: MouseEvent | TouchEvent) => void; - mode?: ClickOutsideMode; listenerId: string; enabled?: boolean; }; @@ -25,7 +19,6 @@ export const useListenClickOutside = ({ refs, excludeClassNames, callback, - mode = ClickOutsideMode.compareHTMLRef, listenerId, enabled = true, }: ClickOutsideListenerProps) => { @@ -60,67 +53,16 @@ export const useListenClickOutside = ({ return; } - switch (mode) { - case ClickOutsideMode.compareHTMLRef: { - const clickedOnAtLeastOneRef = refs - .filter((ref) => !!ref.current) - .some((ref) => ref.current?.contains(event.target as Node)); + const clickedOnAtLeastOneRef = refs + .filter((ref) => !!ref.current) + .some((ref) => ref.current?.contains(event.target as Node)); - set( - clickOutsideListenerIsMouseDownInsideState, - clickedOnAtLeastOneRef, - ); - break; - } - - case ClickOutsideMode.comparePixels: { - const clickedOnAtLeastOneRef = refs - .filter((ref) => !!ref.current) - .some((ref) => { - if (!ref.current) { - return false; - } - - const { x, y, width, height } = - ref.current.getBoundingClientRect(); - - const clientX = - 'clientX' in event - ? event.clientX - : event.changedTouches[0].clientX; - const clientY = - 'clientY' in event - ? event.clientY - : event.changedTouches[0].clientY; - - if ( - clientX < x || - clientX > x + width || - clientY < y || - clientY > y + height - ) { - return false; - } - return true; - }); - - set( - clickOutsideListenerIsMouseDownInsideState, - clickedOnAtLeastOneRef, - ); - break; - } - - default: { - break; - } - } + set(clickOutsideListenerIsMouseDownInsideState, clickedOnAtLeastOneRef); }, [ clickOutsideListenerIsActivatedState, clickOutsideListenerMouseDownHappenedState, enabled, - mode, refs, clickOutsideListenerIsMouseDownInsideState, ], @@ -162,94 +104,34 @@ export const useListenClickOutside = ({ currentElement = currentElement.parentElement; } - if (mode === ClickOutsideMode.compareHTMLRef) { - const clickedOnAtLeastOneRef = refs - .filter((ref) => !!ref.current) - .some((ref) => ref.current?.contains(event.target as Node)); + const clickedOnAtLeastOneRef = refs + .filter((ref) => !!ref.current) + .some((ref) => ref.current?.contains(event.target as Node)); - const shouldTrigger = - isListening && - hasMouseDownHappened && - !clickedOnAtLeastOneRef && - !isMouseDownInside && - !isClickedOnExcluded; + const shouldTrigger = + isListening && + hasMouseDownHappened && + !clickedOnAtLeastOneRef && + !isMouseDownInside && + !isClickedOnExcluded; - if (CLICK_OUTSIDE_DEBUG_MODE) { - // eslint-disable-next-line no-console - console.log('click outside compare ref', { - listenerId, - shouldTrigger, - clickedOnAtLeastOneRef, - isMouseDownInside, - isListening, - hasMouseDownHappened, - isClickedOnExcluded, - enabled, - event, - }); - } - - if (shouldTrigger) { - callback(event); - } + if (CLICK_OUTSIDE_DEBUG_MODE) { + // eslint-disable-next-line no-console + console.log('click outside compare ref', { + listenerId, + shouldTrigger, + clickedOnAtLeastOneRef, + isMouseDownInside, + isListening, + hasMouseDownHappened, + isClickedOnExcluded, + enabled, + event, + }); } - if (mode === ClickOutsideMode.comparePixels) { - const clickedOnAtLeastOneRef = refs - .filter((ref) => !!ref.current) - .some((ref) => { - if (!ref.current) { - return false; - } - - const { x, y, width, height } = - ref.current.getBoundingClientRect(); - - const clientX = - 'clientX' in event - ? event.clientX - : event.changedTouches[0].clientX; - const clientY = - 'clientY' in event - ? event.clientY - : event.changedTouches[0].clientY; - - if ( - clientX < x || - clientX > x + width || - clientY < y || - clientY > y + height - ) { - return false; - } - return true; - }); - - const shouldTrigger = - !clickedOnAtLeastOneRef && - !isMouseDownInside && - isListening && - hasMouseDownHappened && - !isClickedOnExcluded; - - if (CLICK_OUTSIDE_DEBUG_MODE) { - // eslint-disable-next-line no-console - console.log('click outside compare pixel', { - listenerId, - shouldTrigger, - clickedOnAtLeastOneRef, - isMouseDownInside, - isListening, - hasMouseDownHappened, - isClickedOnExcluded, - enabled, - event, - }); - } - - if (shouldTrigger) { - callback(event); - } + if (shouldTrigger) { + callback(event); } }, [ @@ -257,7 +139,6 @@ export const useListenClickOutside = ({ enabled, clickOutsideListenerIsMouseDownInsideState, clickOutsideListenerMouseDownHappenedState, - mode, refs, excludeClassNames, callback, @@ -291,5 +172,5 @@ export const useListenClickOutside = ({ capture: true, }); }; - }, [refs, callback, mode, handleClickOutside, handleMouseDown]); + }, [refs, callback, handleClickOutside, handleMouseDown]); }; diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx index fd4822e6f..450417761 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx @@ -51,7 +51,6 @@ export const ViewBarFilterDropdown = ({ dropdownHotkeyScope={hotkeyScope} dropdownOffset={{ y: 8 }} onClickOutside={handleDropdownClickOutside} - dropdownWidth={280} /> ); }; diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx index 1eb0dd3bd..1d2e7d46b 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx @@ -79,7 +79,7 @@ export const ViewBarFilterDropdownFieldSelectMenu = () => { selectableItemIdArray={selectableFieldMetadataItemIds} selectableListInstanceId={FILTER_FIELD_LIST_ID} > - + {selectableVisibleFieldMetadataItems.map( (visibleFieldMetadataItem) => (