From b04cae571925ed9f0653707e0b449c056cd4458b Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 28 May 2021 15:11:16 +1000
Subject: [PATCH] Fix responsiveness and placeholder height.

---
 .../block-library/src/legacy-widget/edit/form.js    | 13 ++++++++++---
 .../block-library/src/legacy-widget/editor.scss     |  3 ++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/legacy-widget/edit/form.js b/packages/block-library/src/legacy-widget/edit/form.js
index 2dc9ad4513c82..5fe54c8782f34 100644
--- a/packages/block-library/src/legacy-widget/edit/form.js
+++ b/packages/block-library/src/legacy-widget/edit/form.js
@@ -24,6 +24,8 @@ export default function Form( {
 } ) {
 	const ref = useRef();
 
+	const isMediumLargeViewport = useViewportMatch( 'small' );
+
 	// We only want to remount the control when the instance changes
 	// *externally*. For example, if the user performs an undo. To do this, we
 	// keep track of changes made to instance by the control itself and then
@@ -70,9 +72,14 @@ export default function Form( {
 
 			control.destroy();
 		};
-	}, [ id, idBase, instance, onChangeInstance, onChangeHasPreview ] );
-
-	const isMediumLargeViewport = useViewportMatch( 'small' );
+	}, [
+		id,
+		idBase,
+		instance,
+		onChangeInstance,
+		onChangeHasPreview,
+		isMediumLargeViewport,
+	] );
 
 	if ( isWide && isMediumLargeViewport ) {
 		return (
diff --git a/packages/block-library/src/legacy-widget/editor.scss b/packages/block-library/src/legacy-widget/editor.scss
index 929012a069c6f..710e4d905879c 100644
--- a/packages/block-library/src/legacy-widget/editor.scss
+++ b/packages/block-library/src/legacy-widget/editor.scss
@@ -90,6 +90,7 @@
 // When wide widget is selected it opens in a popover but its container should still have a bit of height.
 .is-selected {
 	.wp-block-legacy-widget__container {
-		min-height: 30px;
+		padding: $grid-unit-10 $grid-unit-15;
+		min-height: 50px;
 	}
 }