fix: drop down menu should be of 160px size (#1459)

* fix: drop down menu should be of 160px size

* fix: typing

* fix: remove debug

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'};
 `;

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}
       </StyledDropdownButton>
       {isUnfolded && (
-        <DropdownMenuContainer anchor={anchor} onClose={onOutsideClick}>
+        <DropdownMenuContainer
+          width={menuWidth}
+          anchor={anchor}
+          onClose={onOutsideClick}
+        >
           {children}
         </DropdownMenuContainer>
       )}

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<HTMLUListElement>;
 
 export function DropdownMenuContainer({
   anchor = 'right',
   children,
   onClose,
+  width,
   ...props
 }: DropdownMenuContainerProps) {
   const dropdownRef = useRef(null);
@@ -38,7 +40,9 @@ export function DropdownMenuContainer({
 
   return (
     <StyledDropdownMenuContainer data-select-disable {...props} anchor={anchor}>
-      <StyledDropdownMenu ref={dropdownRef}>{children}</StyledDropdownMenu>
+      <StyledDropdownMenu ref={dropdownRef} width={width}>
+        {children}
+      </StyledDropdownMenu>
     </StyledDropdownMenuContainer>
   );
 }

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 ? (
         <FilterDropdownFilterSelect context={context} />