Merge pull request #1160 from mirumee/SALEOR-3572-fix-mobile-warehouse-header-layout

Button made inline with the header on mobile displays

src/components/ExtendedPageHeader/ExtendedPageHeader.tsx

@@ -11,7 +11,7 @@ const useStyles = makeStyles(
       }
     },
     block: {
-      [theme.breakpoints.down("sm")]: {
+      [theme.breakpoints.down("xs")]: {
         "&&": {
           display: "block"
         }

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")]: {

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)