From 968d09cc5f3d49808a5df88e9a8b39ada208e774 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Mon, 21 Jul 2025 09:46:32 +0200
Subject: [PATCH] fix: Dataset browser on mobile

---
 CHANGELOG.md                           |  1 +
 app/browser/select-dataset-step.tsx    | 20 ++++++++++++++++----
 app/configurator/components/layout.tsx | 25 +++++++++++++++++++++++++
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c6d8d9cc41..53d93cdd0d 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/app/browser/select-dataset-step.tsx b/app/browser/select-dataset-step.tsx
index 4708674586..7e040b381d 100644
--- a/app/browser/select-dataset-step.tsx
+++ b/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>
diff --git a/app/configurator/components/layout.tsx b/app/configurator/components/layout.tsx
index 55f6182856..566d650290 100644
--- a/app/configurator/components/layout.tsx
+++ b/app/configurator/components/layout.tsx
@@ -32,6 +32,14 @@ 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`,
@@ -39,6 +47,14 @@ const useStyles = makeStyles<Theme>((theme) => ({
     "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`,
@@ -46,6 +62,15 @@ const useStyles = makeStyles<Theme>((theme) => ({
     "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",