diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectMenu.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectMenu.tsx index 603f44d1b..48ac76efb 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectMenu.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectMenu.tsx @@ -150,7 +150,7 @@ export const AdvancedFilterFieldSelectMenu = ({ {shouldShowVisibleFields && ( <> - + {visibleColumnsFieldMetadataItems.map( (visibleFieldMetadataItem, index) => ( - + {hiddenColumnsFieldMetadataItems.map( (hiddenFieldMetadataItem, index) => ( { selectableItemIdArray={options.map((option) => option.toString())} hotkeyScope={SingleRecordPickerHotkeyScope.SingleRecordPicker} > - + {options.map((option) => ( { }} /> - + {filteredSelectedItems?.map((item) => { return ( { }; return ( - + { hotkeyScope={SingleRecordPickerHotkeyScope.SingleRecordPicker} > - {optionsInDropdown?.map((option) => ( - - handleMultipleOptionSelectChange(option, selected) - } - text={option.label} - color={option.color} - className="" - /> - ))} + {showNoResult ? ( + + ) : ( + optionsInDropdown?.map((option) => ( + + handleMultipleOptionSelectChange(option, selected) + } + text={option.label} + color={option.color} + className="" + /> + )) + )} - {showNoResult && } ); }; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx deleted file mode 100644 index ba896562e..000000000 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { useEmptyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useEmptyRecordFilter'; -import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; -import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { IconFilterOff } from 'twenty-ui/display'; -import { MenuItem } from 'twenty-ui/navigation'; - -export const ObjectFilterDropdownRecordRemoveFilterMenuItem = () => { - const { emptyRecordFilter } = useEmptyRecordFilter(); - - const { closeDropdown } = useDropdown(); - - const handleRemoveFilter = () => { - emptyRecordFilter(); - closeDropdown(); - }; - - return ( - - - - ); -}; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextInput.tsx index fc23a0e87..4c39c6892 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextInput.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextInput.tsx @@ -38,7 +38,7 @@ export const ObjectFilterDropdownTextInput = () => { }; return ( - + { {!!currentView && ( - - + + { @@ -157,7 +157,9 @@ export const ObjectOptionsDropdownLayoutContent = () => { onClick={handleSelectKanbanViewType} /> - + + + { @@ -232,8 +234,8 @@ export const ObjectOptionsDropdownLayoutContent = () => { )} - - + + )} ); diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx index b2ddd4240..c67b79412 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx @@ -173,7 +173,9 @@ export const ObjectOptionsDropdownMenuContent = () => { width="100%" /> )} - + + + { diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx index 5d3cf82fb..029082805 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx @@ -286,7 +286,7 @@ export const ObjectSortDropdownButton = ({ {shouldShowVisibleFields && ( <> - + {visibleFieldMetadataItems.map( (visibleFieldMetadataItem, index) => ( - + {hiddenFieldMetadataItems.map( (hiddenFieldMetadataItem, index) => ( ({ {!!items.length && ( <> - + {items.map((item, index) => renderItem({ value: item, diff --git a/packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx b/packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx index 2d988f984..bff9993ea 100644 --- a/packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx @@ -87,7 +87,7 @@ export const MultipleSelectDropdown = ({ selectableItemIdArray={selectableItemIds} hotkeyScope={hotkeyScope} > - + {itemsInDropdown?.map((item) => { return ( ` --padding: ${({ theme }) => theme.spacing(1)}; @@ -14,22 +10,27 @@ const StyledDropdownMenuItemsExternalContainer = styled.div<{ display: flex; flex-direction: column; - max-height: ${({ hasMaxHeight }) => (hasMaxHeight ? '168px' : 'none')}; + max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : 'none')}; + + width: 100%; + + height: fit-content; padding: var(--padding); - - ${({ width }) => - isDefined(width) && width === '100%' - ? css` - width: 100%; - ` - : css` - width: ${width}px; - `} + box-sizing: border-box; `; -const StyledDropdownMenuItemsInternalContainer = styled.div` - align-items: stretch; +const StyledScrollableContainer = styled.div<{ maxHeight?: number }>` + box-sizing: border-box; + + display: flex; + max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : 'none')}; + width: 100%; + + overflow-y: scroll; +`; + +const StyledInternalContainer = styled.div` display: flex; flex-direction: column; @@ -39,64 +40,28 @@ const StyledDropdownMenuItemsInternalContainer = styled.div` width: 100%; `; -const StyledScrollWrapper = styled(ScrollWrapper)` - width: 100%; -`; - export const DropdownMenuItemsContainer = ({ children, hasMaxHeight, - className, scrollable = true, - width = 'auto', - scrollWrapperHeightAuto, }: { children: React.ReactNode; hasMaxHeight?: boolean; - className?: string; scrollable?: boolean; - width?: number | 'auto' | '100%'; - scrollWrapperHeightAuto?: boolean; }) => { - const id = useId(); - - return scrollable !== true ? ( - - {hasMaxHeight ? ( - - - {children} - - - ) : ( - - {children} - - )} - + + {children} + + ) : ( - - - - {children} - - - + + {children} + ); }; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/constants/DropdownMenuItemsContainerMaxHeight.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/constants/DropdownMenuItemsContainerMaxHeight.ts new file mode 100644 index 000000000..23a6872c3 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/constants/DropdownMenuItemsContainerMaxHeight.ts @@ -0,0 +1 @@ +export const DROPDOWN_MENU_ITEMS_CONTAINER_MAX_HEIGHT = 168; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx index 764425253..62bbbe0be 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx @@ -46,11 +46,6 @@ const StyledDescription = styled.div` padding-left: ${({ theme }) => theme.spacing(1)}; `; -const StyledDropdownMenuItemsContainer = styled.div` - margin: ${({ theme }) => theme.spacing(1)} 0; - padding: 0 ${({ theme }) => theme.spacing(1)}; -`; - export const MultiWorkspaceDropdownDefaultComponents = () => { const currentWorkspace = useRecoilValue(currentWorkspaceState); const { t } = useLingui(); @@ -134,7 +129,7 @@ export const MultiWorkspaceDropdownDefaultComponents = () => { {workspaces.length > 1 && ( <> - + {workspaces .filter(({ id }) => id !== currentWorkspace?.id) .slice(0, 3) @@ -171,7 +166,7 @@ export const MultiWorkspaceDropdownDefaultComponents = () => { hasSubMenu={true} /> )} - + )} diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx index f7010de79..80a9edaae 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx @@ -7,7 +7,7 @@ import { scrollWrapperScrollLeftComponentState } from '@/ui/utilities/scroll/sta import { scrollWrapperScrollTopComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; -const StyledScrollWrapper = styled.div<{ height: string }>` +const StyledScrollWrapper = styled.div` &.scroll-wrapper-x-enabled { overflow-x: overlay; } @@ -17,7 +17,7 @@ const StyledScrollWrapper = styled.div<{ height: string }>` overflow-x: hidden; overflow-y: hidden; width: 100%; - height: ${({ height }) => height}; + height: 100%; `; export type ScrollWrapperProps = { @@ -26,7 +26,6 @@ export type ScrollWrapperProps = { defaultEnableXScroll?: boolean; defaultEnableYScroll?: boolean; componentInstanceId: string; - heightAuto?: boolean; }; export const ScrollWrapper = ({ @@ -35,7 +34,6 @@ export const ScrollWrapper = ({ className, defaultEnableXScroll = true, defaultEnableYScroll = true, - heightAuto = false, }: ScrollWrapperProps) => { const setScrollTop = useSetRecoilComponentStateV2( scrollWrapperScrollTopComponentState, @@ -73,7 +71,6 @@ export const ScrollWrapper = ({ id={`scroll-wrapper-${componentInstanceId}`} className={className} onScroll={handleScroll} - height={heightAuto ? 'auto' : '100%'} > {children} diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx index 7c82518c6..b0efeccbe 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx @@ -98,8 +98,7 @@ export const ViewBarFilterDropdownFieldSelectMenu = () => { {shouldShowVisibleFields && ( <> - - + {selectableVisibleFieldMetadataItems.map( (visibleFieldMetadataItem) => ( { {shouldShowHiddenFields && ( <> - + {selectableHiddenFieldMetadataItems.map( (hiddenFieldMetadataItem) => ( { return ( - + {