From 6d9d35379971733f4b148dbcdb969c913c43c9c2 Mon Sep 17 00:00:00 2001
From: Jakub Majorek <majorek.jakub@gmail.com>
Date: Wed, 6 Oct 2021 13:11:00 +0200
Subject: [PATCH] Fix sidebar navigation and Products Page overlapping problem
 (#1382) (#1472)

* fix content overlapping issue

* replace margin value

Co-authored-by: Kamil Pastuszka <33246308+kamilpastuszka@users.noreply.github.com>
---
 .../components/ProductListPage/ProductListPage.tsx |  8 +++++++-
 src/storybook/__snapshots__/Stories.test.ts.snap   | 14 +++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/products/components/ProductListPage/ProductListPage.tsx b/src/products/components/ProductListPage/ProductListPage.tsx
index 3f005bacc..e43936c68 100644
--- a/src/products/components/ProductListPage/ProductListPage.tsx
+++ b/src/products/components/ProductListPage/ProductListPage.tsx
@@ -1,5 +1,6 @@
 import { Card } from "@material-ui/core";
 import { mapToMenuItems, useExtensions } from "@saleor/apps/useExtensions";
+import { drawerWidthExpanded } from "@saleor/components/AppLayout/consts";
 import { ButtonWithSelect } from "@saleor/components/ButtonWithSelect";
 import CardMenu from "@saleor/components/CardMenu";
 import ColumnPicker, {
@@ -70,6 +71,11 @@ const useStyles = makeStyles(
     },
     settings: {
       marginRight: theme.spacing(2)
+    },
+    container: {
+      [theme.breakpoints.up("md")]: {
+        marginLeft: drawerWidthExpanded
+      }
     }
   }),
   { name: "ProductListPage" }
@@ -144,7 +150,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
   const extensionCreateButtonItems = mapToMenuItems(create);
 
   return (
-    <Container>
+    <Container className={classes.container}>
       <PageHeader
         title={intl.formatMessage(sectionNames.products)}
         limitText={
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 018785f94..2136be5e6 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -217664,7 +217664,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
   style="padding:24px"
 >
   <div
-    class="Container-root-id"
+    class="Container-root-id ProductListPage-container-id"
   >
     <div
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
@@ -220173,7 +220173,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
   style="padding:24px"
 >
   <div
-    class="Container-root-id"
+    class="Container-root-id ProductListPage-container-id"
   >
     <div
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
@@ -222732,7 +222732,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
   style="padding:24px"
 >
   <div
-    class="Container-root-id"
+    class="Container-root-id ProductListPage-container-id"
   >
     <div
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
@@ -223297,7 +223297,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
   style="padding:24px"
 >
   <div
-    class="Container-root-id"
+    class="Container-root-id ProductListPage-container-id"
   >
     <div
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
@@ -225506,7 +225506,7 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
   style="padding:24px"
 >
   <div
-    class="Container-root-id"
+    class="Container-root-id ProductListPage-container-id"
   >
     <div
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
@@ -225936,7 +225936,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
   style="padding:24px"
 >
   <div
-    class="Container-root-id"
+    class="Container-root-id ProductListPage-container-id"
   >
     <div
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
@@ -228440,7 +228440,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
   style="padding:24px"
 >
   <div
-    class="Container-root-id"
+    class="Container-root-id ProductListPage-container-id"
   >
     <div
       class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"