fix: Max out modal on smaller screens -- no margin (#3100)

theopensystemslab · May 2, 2024 · 422476a · 422476a
1 parent 1c100d3
commit 422476a
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 12 deletions.
diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx
@@ -58,14 +58,19 @@ export const FileTaggingModal = ({
       maxWidth="xl"
       aria-labelledby="dialog-heading"
       PaperProps={{
-        sx: {
+        sx: (theme) => ({
           width: "100%",
           maxWidth: (theme) => theme.breakpoints.values.md,
           borderRadius: 0,
           borderTop: (theme) => `20px solid ${theme.palette.primary.main}`,
           background: "#FFF",
           margin: (theme) => theme.spacing(2),
-        },
+          height: "100%",
+          [theme.breakpoints.down("sm")]: {
+            margin: 0,
+            maxHeight: "none",
+          },
+        }),
       }}
     >
       <DialogContent>

diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx
@@ -355,7 +355,7 @@ export const SelectMultiple = (props: SelectMultipleProps) => {
           },
           popper: {
             sx: {
-              boxShadow: 10,
+              boxShadow: "0 0 10px 4px rgba(0, 0, 0, 0.5)",
             },
           },
         }}

diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts
@@ -223,14 +223,6 @@ const getThemeOptions = ({
           },
         },
       },
-      MuiPopper: {
-        styleOverrides: {
-          root: {
-            // Override default popover box-shadow to increase visual separation
-            boxShadow: "0 0 10px 4px rgba(0, 0, 0, 0.5) !important",
-          },
-        },
-      },
       MuiContainer: {
         styleOverrides: {
           root: {
@@ -492,7 +484,7 @@ const generateTeamTheme = (
     linkColour: DEFAULT_PRIMARY_COLOR,
     logo: null,
     favicon: null,
-  }
+  },
 ): MUITheme => {
   const themeOptions = getThemeOptions(teamTheme);
   const theme = responsiveFontSizes(createTheme(themeOptions), { factor: 3 });
-Original file line number
+Diff line change
@@ Expand Up @@
               },
               popper: {
                 sx: {
-                  boxShadow: 10,
+                  boxShadow: "0 0 10px 4px rgba(0, 0, 0, 0.5)",
                 },
               },
             }}
@@ Expand Down @@