Product Gallery: fix CSS leak (#11111)

* fix CSS leak * fix css * fix comment
woocommerce · Oct 9, 2023 · 1dcaf98 · 1dcaf98
1 parent 1b4e1c5
commit 1dcaf98
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/assets/js/blocks/product-gallery/style.scss b/assets/js/blocks/product-gallery/style.scss
@@ -5,6 +5,8 @@ $next-previous: "#{$large-image}-next-previous";
 $next-previous-left-off: "#{$next-previous}-left--off";
 $next-previous-right-off: "#{$next-previous}-right--off";
 $gallery-next-previous-outside-image: "#{$gallery}[data-next-previous-buttons-position='outsideTheImage']:not(.is-single-product-gallery-image)";
+$gallery-next-previous-inside-image: "#{$gallery}:not([data-next-previous-buttons-position='outsideTheImage']:not(.is-single-product-gallery-image))";
+
 
 $outside-image-offset: 30px;
 $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
@@ -61,6 +63,12 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
 		margin: 0 auto;
 	}
 
+	#{$gallery-next-previous-inside-image} & .wc-block-woocommerce-product-gallery-large-image__container {
+		overflow: unset;
+		max-width: unset;
+		margin: unset;
+	}
+
 	img {
 		display: block;
 		position: relative;
@@ -95,6 +103,12 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
 			margin-left: $outside-image-offset;
 			margin-right: $outside-image-offset;
 		}
+
+		// Unset the margin of the inner blocks when the Next/Previous buttons are inside the image.
+		#{$gallery-next-previous-inside-image}  & > * {
+			margin-left: unset;
+			margin-right: unset;
+		}
 	}
 }