Lightbox: Fix close button position. (#56125)

* use width 100% * remove scroll bar width * refactor * use documentElement
WordPress · Nov 16, 2023 · dc17d94 · dc17d94
1 parent 397320e
commit dc17d94
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
@@ -215,7 +215,7 @@
 	left: 0;
 	z-index: 100000;
 	overflow: hidden;
-	width: 100vw;
+	width: 100%;
 	height: 100vh;
 	box-sizing: border-box;
 	visibility: hidden;
@@ -372,7 +372,7 @@
 
 @keyframes lightbox-zoom-in {
 	0% {
-		transform: translate(calc(-50vw + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
+		transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
 	}
 	100% {
 		transform: translate(-50%, -50%) scale(1, 1);
@@ -389,6 +389,6 @@
 	}
 	100% {
 		visibility: hidden;
-		transform: translate(calc(-50vw + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
+		transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
 	}
 }
diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js
@@ -568,6 +568,9 @@ function setStyles( context, ref ) {
 			--wp--lightbox-image-width: ${ lightboxImgWidth }px;
 			--wp--lightbox-image-height: ${ lightboxImgHeight }px;
 			--wp--lightbox-scale: ${ containerScale };
+			--wp--lightbox-scrollbar-width: ${
+				window.innerWidth - document.documentElement.clientWidth
+			}px;
 		}
 	`;
 }