fix height calculation on block preview (WordPress#63596)

bph · Jul 16, 2024 · 1fa4384 · 1fa4384
1 parent fab9fbc
commit 1fa4384
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/packages/edit-site/src/components/global-styles/block-preview-panel.js b/packages/edit-site/src/components/global-styles/block-preview-panel.js
@@ -35,6 +35,12 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 	const viewportWidth = blockExample?.viewportWidth ?? 500;
 	// Same as height of InserterPreviewPanel.
 	const previewHeight = 144;
+	const sidebarWidth = 235;
+	const scale = sidebarWidth / viewportWidth;
+	const minHeight =
+		scale !== 0 && scale < 1 && previewHeight
+			? previewHeight / scale
+			: previewHeight;
 
 	if ( ! blockExample ) {
 		return null;
@@ -57,7 +63,7 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 								css: `
 								body{
 									padding: 24px;
-									min-height:100%;
+									min-height:${ Math.round( minHeight ) }px;
 									display:flex;
 									align-items:center;
 								}