fix: List component input spacing

theopensystemslab · Sep 3, 2024 · 55c1979 · 55c1979
1 parent 6a87ee2
commit 55c1979
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/editor.planx.uk/src/@planx/components/shared/Schema/SchemaFields.tsx b/editor.planx.uk/src/@planx/components/shared/Schema/SchemaFields.tsx
@@ -1,5 +1,6 @@
 import Box from "@mui/material/Box";
 import { SxProps, Theme } from "@mui/material/styles";
+import { styled } from "@mui/material/styles";
 import { FormikProps } from "formik";
 import React from "react";
 import InputRow from "ui/shared/InputRow";
@@ -20,6 +21,13 @@ interface SchemaFieldsProps {
   sx?: SxProps<Theme>;
 }
 
+const ListRows = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(1, 0),
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(1.5),
+}));
+
 /**
  * Display a set of fields for the provided schema
  */
@@ -29,11 +37,11 @@ export const SchemaFields: React.FC<SchemaFieldsProps> = ({
   sx,
   activeIndex = 0,
 }) => (
-  <Box sx={sx}>
+  <ListRows sx={sx}>
     {schema.fields.map((field, i) => (
       <InputRow key={i}>
         <InputFields {...field} activeIndex={activeIndex} formik={formik} />
       </InputRow>
     ))}
-  </Box>
+  </ListRows>
 );