fix: update dropdown width (#2181)

* fix: update dropdown width

* fix conflict

* refactor dropdown width state

front/src/modules/ui/data/view-bar/components/MultipleFiltersDropdownContent.tsx

@@ -14,6 +14,7 @@ import { FilterDropdownNumberSearchInput } from './FilterDropdownNumberSearchInp
 import { FilterDropdownOperandButton } from './FilterDropdownOperandButton';
 import { FilterDropdownOperandSelect } from './FilterDropdownOperandSelect';
 import { FilterDropdownTextSearchInput } from './FilterDropdownTextSearchInput';
+import { MultipleFiltersDropdownFilterOnFilterChangedEffect } from './MultipleFiltersDropdownFilterOnFilterChangedEffect';
 
 export const MultipleFiltersDropdownContent = () => {
   const { ViewBarRecoilScopeContext } = useViewBarContext();
@@ -62,6 +63,11 @@ export const MultipleFiltersDropdownContent = () => {
           </>
         )
       )}
+      <MultipleFiltersDropdownFilterOnFilterChangedEffect
+        filterDefinitionUsedInDropdownType={
+          filterDefinitionUsedInDropdown?.type
+        }
+      />
     </>
   );
 };

front/src/modules/ui/data/view-bar/components/MultipleFiltersDropdownFilterOnFilterChangedEffect.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+
+export const MultipleFiltersDropdownFilterOnFilterChangedEffect = ({
+  filterDefinitionUsedInDropdownType,
+}: {
+  filterDefinitionUsedInDropdownType: string | undefined;
+}) => {
+  const { setDropdownWidth } = useDropdown();
+
+  useEffect(() => {
+    switch (filterDefinitionUsedInDropdownType) {
+      case 'date':
+        setDropdownWidth(280);
+        break;
+      default:
+        setDropdownWidth(160);
+    }
+  }, [filterDefinitionUsedInDropdownType, setDropdownWidth]);
+
+  return null;
+};