fix: make the catalog filter bar more responsive

flanksource · Jul 30, 2024 · 75d7d7a · 75d7d7a
1 parent d0d0e51
commit 75d7d7a
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 8 deletions.
diff --git a/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx b/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx
@@ -92,7 +92,7 @@ export function ConfigChangeFilters({
           ...(configType && { configTypes: defaultConfigType })
         }}
       >
-        <div className={clsx("flex flex-row gap-1", className)} {...props}>
+        <div className={clsx("flex flex-wrap gap-1", className)} {...props}>
           <ConfigTypesTristateDropdown />
           <ChangesTypesDropdown />
           <ConfigChangeSeverity />

diff --git a/...omponents/Configs/Changes/ConfigsRelatedChanges/FilterBar/ConfigRelatedChangesFilters.tsx b/...omponents/Configs/Changes/ConfigsRelatedChanges/FilterBar/ConfigRelatedChangesFilters.tsx
@@ -27,7 +27,7 @@ export function ConfigRelatedChangesFilters({
         paramsToReset={paramsToReset}
         filterFields={["configTypes", "changeType", "severity", "tags"]}
       >
-        <div className={clsx("flex flex-row items-center gap-2", className)}>
+        <div className={clsx("flex flex-wrap items-center gap-2", className)}>
           <ConfigTypesTristateDropdown />
           <ChangesTypesDropdown />
           <ConfigChangeSeverity />

diff --git a/src/components/Configs/ConfigRelationshipFilterBar.tsx b/src/components/Configs/ConfigRelationshipFilterBar.tsx
@@ -19,14 +19,13 @@ export default function ConfigRelationshipFilterBar() {
         "health"
       ]}
     >
-      <div className="flex flex-row items-center gap-1">
+      <div className="flex flex-wrap items-center gap-1">
         <ConfigTypesTristateDropdown />
         <ConfigLabelsDropdown />
         <ConfigHealthyDropdown />
         <ConfigStatusDropdown />
         <ConfigRelationshipToggles />
         <ConfigListToggledDeletedItems />
-        <div className="flex-1" />
         <ConfigGraphTableToggle />
       </div>
     </FormikFilterForm>

diff --git a/src/components/Configs/ConfigsListFilters/ConfigGraphTableToggle.tsx b/src/components/Configs/ConfigsListFilters/ConfigGraphTableToggle.tsx
@@ -23,7 +23,7 @@ export default function ConfigGraphTableToggle() {
   );
 
   return (
-    <div className="flex flex-row items-center gap-2 px-2">
+    <div className="ml-auto flex flex-row items-center gap-2 px-2">
       <Switch
         options={["Table", "Graph"]}
         onChange={(v) => {

diff --git a/src/components/Configs/ConfigsListFilters/ConfigsListFilters.tsx b/src/components/Configs/ConfigsListFilters/ConfigsListFilters.tsx
@@ -20,7 +20,7 @@ export default function ConfigsListFilters() {
         "groupBy"
       ]}
     >
-      <div className="mr-4 flex flex-row items-center gap-2">
+      <div className="mr-4 flex flex-wrap items-center gap-2">
         <ConfigTypesDropdown />
 
         <ConfigGroupByDropdown />

diff --git a/src/ui/FormControls/TextInputClearable.tsx b/src/ui/FormControls/TextInputClearable.tsx
@@ -41,7 +41,7 @@ export function TextInputClearable({
           onChange={onChange}
           type="text"
           className={clsx(
-            `block h-full w-full border-gray-300 py-1 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm ${
+            `block h-full w-full min-w-[5rem] border-gray-300 py-1 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm ${
               hideButton ? "rounded-md" : "rounded-l-md"
             } ${inputClassName}`,
             !hideClearButton && value && "pr-6"

diff --git a/src/ui/FormControls/Toggle.tsx b/src/ui/FormControls/Toggle.tsx
@@ -45,7 +45,9 @@ export function Toggle({
       </Switch>
 
       <Switch.Label as="span" className="ml-2">
-        <span className="text-sm font-medium text-gray-700">{label}</span>
+        <span className="min-w-min text-wrap text-sm font-medium text-gray-700">
+          {label}
+        </span>
         <span className="text-sm text-gray-500">{help}</span>
       </Switch.Label>