fix: update responsive logic for audit table filter

Parkreiner · Parkreiner · commit 66a55a6fc894 · 2024-09-05T22:48:02.000Z
diff --git a/site/src/components/Filter/Filter.tsx b/site/src/components/Filter/Filter.tsx
@@ -139,7 +139,13 @@ type FilterProps = {
 	error?: unknown;
 	options?: ReactNode;
 	presets: PresetFilter[];
-	breakpoint?: Breakpoint;
+
+	/**
+	 * The CSS media query breakpoint that defines when the UI will try
+	 * displaying all options on one row, regardless of the number of options
+	 * present
+	 */
+	singleRowBreakpoint?: Breakpoint;
 };
 
 export const Filter: FC<FilterProps> = ({
@@ -152,7 +158,7 @@ export const Filter: FC<FilterProps> = ({
 	learnMoreLabel2,
 	learnMoreLink2,
 	presets,
-	breakpoint = "md",
+	singleRowBreakpoint = "lg",
 }) => {
 	const theme = useTheme();
 	// Storing local copy of the filter query so that it can be updated more
@@ -183,10 +189,10 @@ export const Filter: FC<FilterProps> = ({
 				display: "flex",
 				gap: 8,
 				marginBottom: 16,
-				flexWrap: "nowrap",
+				flexWrap: "wrap",
 
-				[theme.breakpoints.down(breakpoint)]: {
-					flexWrap: "wrap",
+				[theme.breakpoints.up(singleRowBreakpoint)]: {
+					flexWrap: "nowrap",
 				},
 			}}
 		>
diff --git a/site/src/components/Filter/SelectFilter.tsx b/site/src/components/Filter/SelectFilter.tsx
@@ -52,7 +52,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
 			<SelectMenuTrigger>
 				<SelectMenuButton
 					startIcon={selectedOption?.startIcon}
-					css={{ width, flexGrow: 1 }}
+					css={{ flexBasis: width, flexGrow: 1 }}
 					aria-label={label}
 				>
 					{selectedOption?.label ?? placeholder}
diff --git a/site/src/components/SearchField/SearchField.tsx b/site/src/components/SearchField/SearchField.tsx
@@ -21,6 +21,10 @@ export const SearchField: FC<SearchFieldProps> = ({
 	const theme = useTheme();
 	return (
 		<TextField
+			// Have to specify min width so that, as we keep adding more and
+			// control options to the filter row, the text box doesn't have a
+			// risk of shrinking so much that it becomes un-clickable
+			css={{ minWidth: "320px" }}
 			size="small"
 			value={value}
 			onChange={(e) => onChange(e.target.value)}
diff --git a/site/src/pages/AuditPage/AuditFilter.tsx b/site/src/pages/AuditPage/AuditFilter.tsx
@@ -55,7 +55,6 @@ export const AuditFilter: FC<AuditFilterProps> = ({ filter, error, menus }) => {
 			isLoading={menus.user.isInitializing}
 			filter={filter}
 			error={error}
-			breakpoint={menus.organization && "lg"}
 			options={
 				<>
 					<ResourceTypeMenu width={width} menu={menus.resourceType} />

Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({`
`52`	`52`	`<SelectMenuTrigger>`
`53`	`53`	`<SelectMenuButton`
`54`	`54`	`startIcon={selectedOption?.startIcon}`
`55`		`- css={{ width, flexGrow: 1 }}`
	`55`	`+ css={{ flexBasis: width, flexGrow: 1 }}`
`56`	`56`	`aria-label={label}`
`57`	`57`	`>`
`58`	`58`	`{selectedOption?.label ?? placeholder}`