From dd2dff1344f2e4b3eca4f136dec24b4eeb33783b Mon Sep 17 00:00:00 2001
From: Ian Jones <51156018+ianjon3s@users.noreply.github.com>
Date: Tue, 12 Dec 2023 15:09:13 +0000
Subject: [PATCH] fix: Editor layout for small screens (#2554)

---
 .../src/@planx/components/Checklist/Editor.tsx     |  2 +-
 .../src/@planx/components/Question/Editor.tsx      |  2 +-
 editor.planx.uk/src/ui/Input.tsx                   |  1 -
 editor.planx.uk/src/ui/ModalSectionContent.tsx     | 14 ++++++++++++--
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx
index 6e14019033..21fdc11cf4 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx
@@ -178,7 +178,7 @@ const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
                     </IconButton>
                   </Box>
                 </Box>
-                <Box pl={4}>
+                <Box pl={{ md: 2 }}>
                   <ListManager
                     values={groupedOption.children}
                     onChange={(newOptions) => {
diff --git a/editor.planx.uk/src/@planx/components/Question/Editor.tsx b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
index 35dc0d8825..4847bc60ad 100644
--- a/editor.planx.uk/src/@planx/components/Question/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
@@ -86,7 +86,7 @@ const OptionEditor: React.FC<{
             },
           });
         }}
-        sx={{ width: "160px", maxWidth: "160px" }}
+        sx={{ width: { md: "160px" }, maxWidth: "160px" }}
       />
     </InputRow>
     <InputRow>
diff --git a/editor.planx.uk/src/ui/Input.tsx b/editor.planx.uk/src/ui/Input.tsx
index abb5b40396..a02ffe85d8 100644
--- a/editor.planx.uk/src/ui/Input.tsx
+++ b/editor.planx.uk/src/ui/Input.tsx
@@ -67,7 +67,6 @@ const StyledInputBase = styled(InputBase, {
   ...(format === "large" && {
     backgroundColor: theme.palette.common.white,
     height: 50,
-    fontSize: 25,
     width: "100%",
     fontWeight: FONT_WEIGHT_SEMI_BOLD,
   }),
diff --git a/editor.planx.uk/src/ui/ModalSectionContent.tsx b/editor.planx.uk/src/ui/ModalSectionContent.tsx
index f8739275ab..4bfe0e18fd 100644
--- a/editor.planx.uk/src/ui/ModalSectionContent.tsx
+++ b/editor.planx.uk/src/ui/ModalSectionContent.tsx
@@ -16,16 +16,26 @@ const SectionContentGrid = styled(Grid)(({ theme }) => ({
   paddingTop: theme.spacing(2),
   paddingBottom: theme.spacing(2),
   flexWrap: "nowrap",
+  [theme.breakpoints.down("md")]: {
+    flexDirection: "column",
+    alignItems: "flex-start",
+  },
 }));
 
 const LeftGutter = styled(Grid)(({ theme }) => ({
-  flex: `0 0 ${theme.spacing(6)}`,
+  flex: `0 0 ${theme.spacing(3)}`,
   textAlign: "center",
+  [theme.breakpoints.up("md")]: {
+    flex: `0 0 ${theme.spacing(6)}`,
+  },
 }));
 
 const SectionContent = styled(Grid)(({ theme }) => ({
   flexGrow: 1,
-  paddingRight: theme.spacing(6),
+  width: "100%",
+  [theme.breakpoints.up("md")]: {
+    paddingRight: theme.spacing(6),
+  },
 }));
 
 const Title = styled(Typography)(({ theme }) => ({