From f22c503adeb14f266ff410d0797f30cb3e8b9b1a Mon Sep 17 00:00:00 2001
From: Ian Jones <51156018+ianjon3s@users.noreply.github.com>
Date: Thu, 6 Feb 2025 16:34:36 +0000
Subject: [PATCH] style: Filter column widths (#4272)

---
 editor.planx.uk/src/ui/editor/Filter/Filter.tsx        | 1 +
 editor.planx.uk/src/ui/editor/Filter/FiltersColumn.tsx | 9 ++-------
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/editor.planx.uk/src/ui/editor/Filter/Filter.tsx b/editor.planx.uk/src/ui/editor/Filter/Filter.tsx
index 6f788b18f3..4c0ffd9f23 100644
--- 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
index 8af92e1873..a20faa90a5 100644
--- a/editor.planx.uk/src/ui/editor/Filter/FiltersColumn.tsx
+++ b/editor.planx.uk/src/ui/editor/Filter/FiltersColumn.tsx
@@ -1,5 +1,4 @@
 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";
@@ -7,10 +6,6 @@ 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>
   );
 };