From 2f5236e9811df2d4ee3a5be2452f7ae2b97d5218 Mon Sep 17 00:00:00 2001
From: sektordv <roman@sawblade.pl>
Date: Mon, 14 Jun 2021 13:24:46 +0200
Subject: [PATCH 1/2] button made inline with the header on mobile

---
 .../components/WarehouseListPage/WarehouseListPage.tsx           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx b/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx
index d5424c827..84bb134e6 100644
--- a/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx
+++ b/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx
@@ -64,6 +64,7 @@ export const WarehouseListPage: React.FC<WarehouseListPageProps> = ({
         <FormattedMessage {...sectionNames.configuration} />
       </AppHeader>
       <PageHeader
+        inline
         title={intl.formatMessage(sectionNames.warehouses)}
         limit={
           hasLimits(limits, "warehouses") && {

From 3812fae7a04484ece1724f593bcd3f9178e77515 Mon Sep 17 00:00:00 2001
From: sektordv <roman@sawblade.pl>
Date: Tue, 15 Jun 2021 12:36:20 +0200
Subject: [PATCH 2/2] updated pageHeader buttons layout for xs displays

---
 .../ExtendedPageHeader/ExtendedPageHeader.tsx        |  2 +-
 src/components/PageHeader/PageHeader.tsx             | 12 +++++++++++-
 .../components/ProductListPage/ProductListPage.tsx   |  7 ++++++-
 .../WarehouseListPage/WarehouseListPage.tsx          |  1 -
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx b/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx
index 15589f4e7..8eabf42f7 100644
--- a/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx
+++ b/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx
@@ -11,7 +11,7 @@ const useStyles = makeStyles(
       }
     },
     block: {
-      [theme.breakpoints.down("sm")]: {
+      [theme.breakpoints.down("xs")]: {
         "&&": {
           display: "block"
         }
diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx
index 87d0238fa..a54136ba3 100644
--- a/src/components/PageHeader/PageHeader.tsx
+++ b/src/components/PageHeader/PageHeader.tsx
@@ -14,7 +14,17 @@ const useStyles = makeStyles(
     },
     root: {
       alignItems: "center",
-      display: "flex"
+      display: "flex",
+      [theme.breakpoints.down("xs")]: {
+        flexDirection: "column",
+        alignItems: "flex-start",
+        "& > *": {
+          width: "100%"
+        },
+        "& > *:not(first-child)": {
+          marginTop: theme.spacing(2)
+        }
+      }
     },
     title: {
       [theme.breakpoints.down("sm")]: {
diff --git a/src/products/components/ProductListPage/ProductListPage.tsx b/src/products/components/ProductListPage/ProductListPage.tsx
index 4d1487075..a6ce1abe4 100644
--- a/src/products/components/ProductListPage/ProductListPage.tsx
+++ b/src/products/components/ProductListPage/ProductListPage.tsx
@@ -57,7 +57,12 @@ export interface ProductListPageProps
 const useStyles = makeStyles(
   theme => ({
     columnPicker: {
-      marginRight: theme.spacing(3)
+      marginRight: theme.spacing(3),
+      [theme.breakpoints.down("xs")]: {
+        "& > button": {
+          width: "100%"
+        }
+      }
     },
     settings: {
       marginRight: theme.spacing(2)
diff --git a/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx b/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx
index 84bb134e6..d5424c827 100644
--- a/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx
+++ b/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx
@@ -64,7 +64,6 @@ export const WarehouseListPage: React.FC<WarehouseListPageProps> = ({
         <FormattedMessage {...sectionNames.configuration} />
       </AppHeader>
       <PageHeader
-        inline
         title={intl.formatMessage(sectionNames.warehouses)}
         limit={
           hasLimits(limits, "warehouses") && {