From 34d20ce2ddb44385f2633b4d1df4934c9b5ab194 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Wed, 3 Jul 2024 10:21:06 +1000
Subject: [PATCH] Revert input sizes Ensure long file names are not cut off by
 min-width Use clamp value for focal picker image height

---
 .../src/components/global-styles/background-panel.js  |  3 +++
 .../src/components/global-styles/style.scss           | 11 +++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index 189fe967f8bf9b..6baef04f39b6b3 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -545,6 +545,7 @@ function BackgroundSizeControls( {
 	return (
 		<VStack spacing={ 3 } className="single-column">
 			<FocalPointPicker
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				label={ __( 'Position' ) }
 				url={ getResolvedThemeFilePath( imageValue, themeFileURIs ) }
@@ -552,6 +553,7 @@ function BackgroundSizeControls( {
 				onChange={ updateBackgroundPosition }
 			/>
 			<ToggleGroupControl
+				size="__unstable-large"
 				label={ __( 'Size' ) }
 				value={ currentValueForToggle }
 				onChange={ updateBackgroundSize }
@@ -590,6 +592,7 @@ function BackgroundSizeControls( {
 					aria-label={ __( 'Background image width' ) }
 					onChange={ updateBackgroundSize }
 					value={ sizeValue }
+					size="__unstable-large"
 					__unstableInputWidth="100px"
 					min={ 0 }
 					placeholder={ __( 'Auto' ) }
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index e6f23939aabe49..f55e2da6437041 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -154,9 +154,12 @@
 	text-align-last: center;
 }
 
-.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
-	width: 20px;
-	height: 20px;
+.block-editor-global-styles-background-panel__inspector-preview-inner {
+	.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
+		width: 20px;
+		height: 20px;
+		min-width: auto;
+	}
 }
 
 .block-editor-global-styles-background-panel__inspector-image-indicator {
@@ -190,7 +193,7 @@
 		margin-bottom: 0;
 	}
 	.components-focal-point-picker__media--image {
-		max-height: 100px;
+		max-height: clamp(120px, 9vh, 280px);
 	}
 }