Add 5% padding to the lightbox container

WordPress · Jul 28, 2023 · 838d6a1 · 838d6a1
1 parent bc426e5
commit 838d6a1
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/packages/block-library/src/image/view-interactivity.js b/packages/block-library/src/image/view-interactivity.js
@@ -306,10 +306,12 @@ function setZoomStyles( context, event ) {
 	}
 
 	// Calculate the final lightbox image size and the scale factor.
-	// MaxWidth is either the window container or the image resolution.
-	// TO DO: Add padding to the window container value.
-	const targetMaxWidth = Math.min( window.innerWidth, containerWidth );
-	const targetMaxHeight = Math.min( window.innerHeight, containerHeight );
+	// MaxWidth is either the window container (plus padding) or the image resolution.
+	const targetMaxWidth = Math.min( window.innerWidth * 0.95, containerWidth );
+	const targetMaxHeight = Math.min(
+		window.innerHeight * 0.95,
+		containerHeight
+	);
 	const targetContainerRatio = targetMaxWidth / targetMaxHeight;
 
 	if ( originalRatio > targetContainerRatio ) {