fix: Dataset browser on mobile

CHANGELOG.md

@@ -23,6 +23,7 @@ You can also check the
     the palette
   - Use most recent value toggle is now correctly displaying in the single
     filters section
+  - Dataset browse view is now correctly displayed on mobile devices
 - Security
   - Added additional protection against data source URL injection
   - Removed feature flag for custom GraphQL endpoint

app/browser/select-dataset-step.tsx

@@ -85,17 +85,25 @@ const useStyles = makeStyles<
     transition: "margin-top 0.5s ease",
   },
   panelLeft: {
-    minHeight: "100vh",
+    marginBottom: theme.spacing(12),
     boxShadow: "none",
     outline: "none",
     transition: "padding-top 0.5s ease",
+
+    [theme.breakpoints.up("md")]: {
+      minHeight: "100vh",
+      marginBottom: "unset",
+    },
   },
   panelMiddle: {
     gridColumnStart: "middle",
     gridColumnEnd: "right",
-    marginLeft: ({ isOdsIframe }) => (isOdsIframe ? 0 : theme.spacing(8)),
     backgroundColor: theme.palette.background.paper,
     transition: "padding-top 0.5s ease",
+
+    [theme.breakpoints.up("md")]: {
+      marginLeft: ({ isOdsIframe }) => (isOdsIframe ? 0 : theme.spacing(8)),
+    },
   },
   panelBannerOuterWrapper: {
     backgroundColor: theme.palette.monochrome[100],
@@ -405,12 +413,16 @@ const SelectDatasetStepContent = ({
                 style={{ width: "100%" }}
               >
                 <Flex
-                  sx={{
+                  sx={(theme) => ({
                     justifyContent: odsIframe ? "flex-end" : "space-between",
                     alignItems: "center",
                     pt: odsIframe ? 12 : variant == "drawer" ? 10 : 6,
                     pb: 6,
-                  }}
+
+                    [theme.breakpoints.down("md")]: {
+                      flexWrap: "wrap",
+                    },
+                  })}
                 >
                   {odsIframe ? null : (
                     <NextLink href={backLink} passHref legacyBehavior>

app/configurator/components/layout.tsx

@@ -32,20 +32,45 @@ const useStyles = makeStyles<Theme>((theme) => ({
     "header header"
     "left middle"`,
     backgroundColor: theme.palette.monochrome[100],
+
+    [theme.breakpoints.down("md")]: {
+      gridTemplateColumns: `minmax(22rem, 1fr)`,
+      gridTemplateAreas: `
+      "header"
+      "left"
+      "middle"`,
+    },
   },
   MRPanelLayout: {
     gridTemplateColumns: `minmax(22rem, 1fr) ${DRAWER_WIDTH}px`,
     gridTemplateAreas: `
     "header header"
     "middle right"`,
     backgroundColor: theme.palette.monochrome[100],
+
+    [theme.breakpoints.down("md")]: {
+      gridTemplateColumns: `minmax(22rem, 1fr)`,
+      gridTemplateAreas: `
+      "header"
+      "middle"
+      "right"`,
+    },
   },
   LMRPanelLayout: {
     gridTemplateColumns: `${DRAWER_WIDTH}px minmax(22rem, 1fr) ${DRAWER_WIDTH}px`,
     gridTemplateAreas: `
     "header header header"
     "left middle right"`,
     backgroundColor: theme.palette.monochrome[100],
+
+    [theme.breakpoints.down("md")]: {
+      gridTemplateColumns: `minmax(22rem, 1fr)`,
+      gridTemplateAreas: `
+      "header"
+      "left"
+      "middle"
+      "right"`,
+    },
   },
   panelHeaderLayout: {
     gridArea: "header",