Revert input sizes

Ensure long file names are not cut off by min-width Use clamp value for focal picker image height
WordPress · Jul 3, 2024 · 34d20ce · 34d20ce
1 parent d0a56df
commit 34d20ce
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 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
@@ -545,13 +545,15 @@ function BackgroundSizeControls( {
 	return (
 		<VStack spacing={ 3 } className="single-column">
 			<FocalPointPicker
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				label={ __( 'Position' ) }
 				url={ getResolvedThemeFilePath( imageValue, themeFileURIs ) }
 				value={ backgroundPositionToCoords( positionValue ) }
 				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
@@ -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);
 	}
 }