fix: Editor layout for small screens (#2554)

theopensystemslab · Dec 12, 2023 · dd2dff1 · dd2dff1
1 parent f9785de
commit dd2dff1
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 }) => ({