From 00d8e65cf018e753e12c57de51f6a6015959c37f Mon Sep 17 00:00:00 2001
From: Fernando Marichal <fernando.marichal@automattic.com>
Date: Tue, 4 Jul 2023 14:59:33 -0300
Subject: [PATCH] Fix grey background when menu collapsed (#38941)

* Fix styles

* Add changelog

* Fix 'adminmenuback' z-index

* Fix header and footer

* Fix header

* Fix lint

* Fix footer

* Fix form background color
---
 .../client/layout/footer/footer.scss           |  3 +++
 .../client/products/product-page.scss          | 18 +++++++++++++++---
 ...x-38887_grey_background_when_menu_collapsed |  4 ++++
 3 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/fix-38887_grey_background_when_menu_collapsed

diff --git a/plugins/woocommerce-admin/client/layout/footer/footer.scss b/plugins/woocommerce-admin/client/layout/footer/footer.scss
index fa438b5e85c..099cd075a48 100644
--- a/plugins/woocommerce-admin/client/layout/footer/footer.scss
+++ b/plugins/woocommerce-admin/client/layout/footer/footer.scss
@@ -21,3 +21,6 @@
 		width: 100%;
 	}
 }
+.folded .woocommerce-layout__footer {
+	width: calc(100% - $admin-menu-width-collapsed);
+}
diff --git a/plugins/woocommerce-admin/client/products/product-page.scss b/plugins/woocommerce-admin/client/products/product-page.scss
index a53337fe3a4..720749c60c9 100644
--- a/plugins/woocommerce-admin/client/products/product-page.scss
+++ b/plugins/woocommerce-admin/client/products/product-page.scss
@@ -26,9 +26,9 @@
 	.interface-interface-skeleton__header,
 	.interface-interface-skeleton__footer {
 		background-color: $white;
+		position: fixed;
 		width: calc(100% - $admin-menu-width);
 		left: $admin-menu-width;
-		position: fixed;
 		@include breakpoint( '<960px' ) {
 			left: $admin-menu-width-collapsed;
 			width: calc(100% - $admin-menu-width-collapsed);
@@ -37,8 +37,14 @@
 			left: 0;
 			width: 100%;
 		}
-		// Higher than the sidebar which has a z-index of 90.
-		z-index: 100;
+		// Lower than the sidebar which has a z-index of 90.
+		z-index: 80;
+	}
+
+	&.folded .interface-interface-skeleton__header,
+	&.folded .interface-interface-skeleton__footer {
+		width: calc(100% - $admin-menu-width-collapsed);
+		left: $admin-menu-width-collapsed;
 	}
 
 	.interface-interface-skeleton__header {
@@ -60,3 +66,9 @@ html.interface-interface-skeleton__html-container {
 		position: inherit;
 	}
 }
+
+div#wpwrap {
+	.woocommerce-product-block-editor {
+		background-color: $white;
+	}
+}
diff --git a/plugins/woocommerce/changelog/fix-38887_grey_background_when_menu_collapsed b/plugins/woocommerce/changelog/fix-38887_grey_background_when_menu_collapsed
new file mode 100644
index 00000000000..5589691bad4
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-38887_grey_background_when_menu_collapsed
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Fix grey background when menu is collapsed #38887