From d8702f70fa79a7336b645aad8c697af67e65d3bf Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Tue, 9 Jul 2024 12:17:02 +1000
Subject: [PATCH] Global styles: tweak block background position preview height
 (#63225)

* Add a gray background for the focal picker image preview, with a max-height of 180px

* Add border and border radius to focal point picker image container

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 .../block-editor/src/components/global-styles/style.scss  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index f55e2da6437041..f57bc79074153e 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -192,8 +192,14 @@
 	.components-toggle-control {
 		margin-bottom: 0;
 	}
+	.components-focal-point-picker-wrapper {
+		background-color: $gray-100;
+		width: 100%;
+		border-radius: $radius-block-ui;
+		border: $border-width solid $gray-300;
+	}
 	.components-focal-point-picker__media--image {
-		max-height: clamp(120px, 9vh, 280px);
+		max-height: 180px;
 	}
 }