diff --git a/front/src/modules/ui/dropdown/components/StyledDropdownMenu.tsx b/front/src/modules/ui/dropdown/components/StyledDropdownMenu.tsx index f9c0b280e..4a1e33bc6 100644 --- a/front/src/modules/ui/dropdown/components/StyledDropdownMenu.tsx +++ b/front/src/modules/ui/dropdown/components/StyledDropdownMenu.tsx @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; export const StyledDropdownMenu = styled.div<{ disableBlur?: boolean; - width?: number; + width?: `${string}px` | 'auto' | number; }>` backdrop-filter: ${({ disableBlur }) => disableBlur ? 'none' : 'blur(20px)'}; @@ -16,9 +16,8 @@ export const StyledDropdownMenu = styled.div<{ flex-direction: column; - min-width: 160px; - overflow: hidden; - width: ${({ width }) => (width ? `${width}px` : 'auto')}; + width: ${({ width }) => + width ? `${typeof width === 'number' ? `${width}px` : width}` : '160px'}; `; diff --git a/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx b/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx index 0829fe792..52214c11b 100644 --- a/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx +++ b/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx @@ -17,6 +17,7 @@ type OwnProps = { resetState?: () => void; HotkeyScope: string; color?: string; + menuWidth?: `${string}px` | 'auto' | number; }; const StyledDropdownButtonContainer = styled.div` @@ -66,6 +67,7 @@ function DropdownButton({ HotkeyScope, icon, color, + menuWidth, }: OwnProps) { useScopedHotkeys( [Key.Enter, Key.Escape], @@ -97,7 +99,11 @@ function DropdownButton({ {label} {isUnfolded && ( - + {children} )} diff --git a/front/src/modules/ui/filter-n-sort/components/DropdownMenuContainer.tsx b/front/src/modules/ui/filter-n-sort/components/DropdownMenuContainer.tsx index fa5df064f..b0fa535d3 100644 --- a/front/src/modules/ui/filter-n-sort/components/DropdownMenuContainer.tsx +++ b/front/src/modules/ui/filter-n-sort/components/DropdownMenuContainer.tsx @@ -19,12 +19,14 @@ export type DropdownMenuContainerProps = { anchor?: 'left' | 'right'; children: React.ReactNode; onClose?: () => void; + width?: `${string}px` | 'auto' | number; } & HTMLAttributes; export function DropdownMenuContainer({ anchor = 'right', children, onClose, + width, ...props }: DropdownMenuContainerProps) { const dropdownRef = useRef(null); @@ -38,7 +40,9 @@ export function DropdownMenuContainer({ return ( - {children} + + {children} + ); } diff --git a/front/src/modules/ui/filter-n-sort/components/MultipleFiltersDropdownButton.tsx b/front/src/modules/ui/filter-n-sort/components/MultipleFiltersDropdownButton.tsx index 7b0acee04..b3b26c405 100644 --- a/front/src/modules/ui/filter-n-sort/components/MultipleFiltersDropdownButton.tsx +++ b/front/src/modules/ui/filter-n-sort/components/MultipleFiltersDropdownButton.tsx @@ -112,6 +112,12 @@ export function MultipleFiltersDropdownButton({ onIsUnfoldedChange={handleIsUnfoldedChange} HotkeyScope={HotkeyScope} color={color} + menuWidth={ + selectedOperandInDropdown && + filterDefinitionUsedInDropdown?.type === 'date' + ? 'auto' + : undefined + } > {!filterDefinitionUsedInDropdown ? (