Fix card menu styles on small screens (#1813)

* Move cardMenu to page header

* Update tests

* Fix extension menu items

* Refactor card menu in page header

* Update tests

* Apply new page styling to gift cards list

src/components/ButtonWithSelect/ButtonWithSelect.tsx

@@ -68,7 +68,9 @@ export const ButtonWithSelect: React.FC<ButtonWithSelectProps> = ({
         aria-label="button with select"
         {...props}
       >
-        <Button onClick={onClick}>{children}</Button>
+        <Button onClick={onClick} style={{ width: "100%" }}>
+          {children}
+        </Button>
         {options.length > 0 && (
           <Button
             color="primary"

src/components/ExtendedPageHeader/ExtendedPageHeader.tsx

@@ -6,10 +6,7 @@ import React from "react";
 const useStyles = makeStyles(
   theme => ({
     action: {
-      flex: "0 0 auto",
-      [theme.breakpoints.down("sm")]: {
-        marginTop: theme.spacing()
-      }
+      flex: "0 0 auto"
     },
     block: {
       [theme.breakpoints.down("xs")]: {
@@ -41,9 +38,12 @@ const useStyles = makeStyles(
       display: "flex",
       marginBottom: theme.spacing(2)
     },
-    title: {
+    titleRow: {
       flex: 1,
-      paddingBottom: theme.spacing(2)
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between"
     }
   }),
   {
@@ -83,7 +83,7 @@ const ExtendedPageHeader: React.FC<ExtendedPageHeaderProps> = props => {
           [classes.underline]: underline
         })}
       >
-        {title}
+        <div className={classes.titleRow}>{title}</div>
         <div className={classNames(classes.action, childrenWrapperClassName)}>
           {children}
         </div>

src/components/PageHeader/PageHeader.tsx

@@ -27,11 +27,9 @@ const useStyles = makeStyles(
     title: {
       [theme.breakpoints.down("sm")]: {
         fontSize: 20,
-        marginTop: theme.spacing(2),
         padding: 0
       },
       fontWeight: 700,
-      alignSelf: "flex-start",
       flex: 1,
       whiteSpace: "nowrap",
       overflow: "hidden",
@@ -48,10 +46,19 @@ interface PageHeaderProps {
   underline?: boolean;
   limitText?: string;
   title?: React.ReactNode;
+  cardMenu?: React.ReactNode;
 }
 
 const PageHeader: React.FC<PageHeaderProps> = props => {
-  const { children, className, inline, underline, limitText, title } = props;
+  const {
+    children,
+    className,
+    inline,
+    underline,
+    limitText,
+    title,
+    cardMenu
+  } = props;
 
   const classes = useStyles(props);
 
@@ -62,9 +69,16 @@ const PageHeader: React.FC<PageHeaderProps> = props => {
       inline={inline}
       underline={underline}
       title={
-        <Typography className={classes.title} variant="h1">
-          {title !== undefined ? title : <Skeleton style={{ width: "10em" }} />}
-        </Typography>
+        <>
+          <Typography className={classes.title} variant="h1">
+            {title !== undefined ? (
+              title
+            ) : (
+              <Skeleton style={{ width: "10em" }} />
+            )}
+          </Typography>
+          {cardMenu}
+        </>
       }
     >
       <div className={classes.root}>

src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx

@@ -1,5 +1,4 @@
 import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
-import VerticalSpacer from "@saleor/apps/components/VerticalSpacer";
 import CardMenu, { CardMenuItem } from "@saleor/components/CardMenu";
 import PageHeader from "@saleor/components/PageHeader";
 import useNavigator from "@saleor/hooks/useNavigator";
@@ -45,8 +44,10 @@ const GiftCardsListHeader: React.FC = () => {
 
   return (
     <>
-      <PageHeader title={intl.formatMessage(sectionNames.giftCards)}>
-        <CardMenu menuItems={menuItems} data-test="menu" />
+      <PageHeader
+        title={intl.formatMessage(sectionNames.giftCards)}
+        cardMenu={<CardMenu menuItems={menuItems} data-test="menu" />}
+      >
         <HorizontalSpacer spacing={2} />
         <Button
           variant="primary"
@@ -57,7 +58,6 @@ const GiftCardsListHeader: React.FC = () => {
         </Button>
       </PageHeader>
       <GiftCardsListHeaderAlert />
-      <VerticalSpacer spacing={2} />
     </>
   );
 };

src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx

@@ -229,9 +229,8 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
                   <OrderStatusChip order={order} />
                 </PageTitleWithStatusChip>
               }
-            >
-              <CardMenu outlined menuItems={selectCardMenuItems} />
-            </PageHeader>
+              cardMenu={<CardMenu outlined menuItems={selectCardMenuItems} />}
+            />
             <div className={classes.date}>
               {order && order.created ? (
                 <Typography variant="body2">

src/orders/components/OrderListPage/OrderListPage.tsx

@@ -77,21 +77,23 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
             }
           )
         }
+        cardMenu={
+          !!onSettingsOpen && (
+            <CardMenu
+              className={classes.settings}
+              menuItems={[
+                {
+                  label: intl.formatMessage({
+                    defaultMessage: "Order Settings",
+                    description: "button"
+                  }),
+                  onSelect: onSettingsOpen
+                }
+              ]}
+            />
+          )
+        }
       >
-        {!!onSettingsOpen && (
-          <CardMenu
-            className={classes.settings}
-            menuItems={[
-              {
-                label: intl.formatMessage({
-                  defaultMessage: "Order Settings",
-                  description: "button"
-                }),
-                onSelect: onSettingsOpen
-              }
-            ]}
-          />
-        )}
         <Button
           disabled={limitsReached}
           variant="primary"

src/products/components/ProductListPage/ProductListPage.tsx

@@ -71,7 +71,9 @@ const useStyles = makeStyles(
       }
     },
     settings: {
-      marginRight: theme.spacing(2)
+      [theme.breakpoints.up("sm")]: {
+        marginRight: theme.spacing(2)
+      }
     }
   }),
   { name: "ProductListPage" }
@@ -148,6 +150,23 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
   return (
     <Container>
       <PageHeader
+        cardMenu={
+          <CardMenu
+            className={classes.settings}
+            menuItems={[
+              {
+                label: intl.formatMessage({
+                  defaultMessage: "Export Products",
+                  description: "export products to csv file, button"
+                }),
+                onSelect: onExport,
+                testId: "export"
+              },
+              ...extensionMenuItems
+            ]}
+            data-test="menu"
+          />
+        }
         title={intl.formatMessage(sectionNames.products)}
         limitText={
           hasLimits(limits, "productVariants") &&
@@ -163,21 +182,6 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
           )
         }
       >
-        <CardMenu
-          className={classes.settings}
-          menuItems={[
-            {
-              label: intl.formatMessage({
-                defaultMessage: "Export Products",
-                description: "export products to csv file, button"
-              }),
-              onSelect: onExport,
-              testId: "export"
-            },
-            ...extensionMenuItems
-          ]}
-          data-test="menu"
-        />
         <ColumnPicker
           className={classes.columnPicker}
           columns={columns}