Merge pull request bcgov#1735 from djnunez-aot/maxwidth-handling-for-list-filters

Add max width filtering for filters

Author: djnunez-aot

epictrack-web/src/components/project/ProjectList.tsx

@@ -176,6 +176,7 @@ const ProjectList = () => {
               column={column}
               variant="inline"
               name="rolesFilter"
+              maxWidth="328px"
             />
           );
         },

epictrack-web/src/components/shared/filterSelect/FilterSelect.tsx

@@ -165,21 +165,24 @@ const FilterSelect = (props: SelectProps) => {
       onBlur={() => setMenuIsOpen(false)}
       ref={selectRef}
       styles={{
-        option: (base, props) => ({
+        option: (base, provided) => ({
           ...base,
-          whiteSpace: "nowrap",
+          whiteSpace: "normal",
           overflow: "hidden",
           textOverflow: "ellipsis",
           display: "flex",
           alignItems: "center",
           padding: ".5rem .75rem .5rem 0px",
           fontWeight: "normal",
           fontSize: "1rem",
-          background: props.isFocused ? Palette.neutral.bg.main : "transparent",
-          color: props.isSelected
+          maxWidth: props.maxWidth ?? "100%",
+          background: provided.isFocused
+            ? Palette.neutral.bg.main
+            : "transparent",
+          color: provided.isSelected
             ? Palette.primary.accent.main
             : Palette.neutral.accent.dark,
-          cursor: props.isFocused ? "pointer" : "default",
+          cursor: provided.isFocused ? "pointer" : "default",
         }),
         control: (base, props) => ({
           ...base,

epictrack-web/src/components/shared/filterSelect/type.ts

@@ -24,6 +24,7 @@ declare module "react-select/dist/declarations/src/Select" {
       getOptionLabel?: (option: any) => string;
       getOptionValue?: (option: any) => string;
       label?: string;
+      maxWidth?: string;
     };
     filterAppliedCallback?: (value?: string[] | string) => void;
     filterClearedCallback?: (value?: [] | "") => void;
@@ -33,6 +34,7 @@ declare module "react-select/dist/declarations/src/Select" {
 export type SelectProps = {
   variant: "inline" | "bar" | "inline-standalone";
   info?: boolean;
+  maxWidth?: string;
 } & Props<OptionType>;
 
 export type TableFilterProps = {