style: Filter column widths (#4272)

theopensystemslab · Feb 6, 2025 · f22c503 · f22c503
1 parent 757bba9
commit f22c503
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 7 deletions.
diff --git a/editor.planx.uk/src/ui/editor/Filter/Filter.tsx b/editor.planx.uk/src/ui/editor/Filter/Filter.tsx
@@ -207,6 +207,7 @@ export const Filters = <T extends object>({
               <fieldset
                 key={option.displayName}
                 aria-describedby={`${option.displayName}-description`}
+                style={{ flexBasis: "20%" }}
               >
                 <div
                   key={`${option.displayName}-description`}

diff --git a/editor.planx.uk/src/ui/editor/Filter/FiltersColumn.tsx b/editor.planx.uk/src/ui/editor/Filter/FiltersColumn.tsx
@@ -1,16 +1,11 @@
 import Box from "@mui/material/Box";
-import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import { capitalize, get } from "lodash";
 import React from "react";
 import ChecklistItem from "ui/shared/ChecklistItem/ChecklistItem";
 
 import Filters, { FilterKey, FilterValues } from "./Filter";
 
-const Column = styled(Box)(() => ({
-  flexBasis: "20%",
-}));
-
 interface FiltersColumnProps<T> {
   title: string;
   optionKey: FilterKey<T>;
@@ -23,7 +18,7 @@ export const FiltersColumn = <T extends object>(
   props: FiltersColumnProps<T>,
 ) => {
   return (
-    <Column>
+    <Box>
       <Typography component={"legend"} variant="h5" pb={0.5}>
         {props.title}
       </Typography>
@@ -37,6 +32,6 @@ export const FiltersColumn = <T extends object>(
           variant="compact"
         />
       ))}
-    </Column>
+    </Box>
   );
 };