updated pageHeader buttons layout for xs 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)

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") && {