Media: Improve scale/crop layout in image editor medium breakpoints.

joedolson · joedolson · commit 9a3ab816159f · 2024-05-27T18:01:56.000Z
Adjust the max-width of the image edit settings panel so that reflow handling at intermediary breakpoints is more consistent and less fragile. Props deepakvijayan, huzaifaalmesbah, joedolson, khokansardar. Fixes #58979. git-svn-id: https://develop.svn.wordpress.org/trunk@58214 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css
@@ -901,7 +901,7 @@ border color while dragging a file over the uploader drop area */
 }
 
 .imgedit-settings {
-	max-width: 400px; /* Prevent reflow when help info is expanded. */
+	max-width: 240px; /* Prevent reflow when help info is expanded. */
 }
 
 .imgedit-group-controls > * {
diff --git a/src/wp-admin/includes/image-edit.php b/src/wp-admin/includes/image-edit.php
@@ -159,8 +159,8 @@ function wp_image_editor( $post_id, $msg = false ) {
 							<label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>
 							<input type="number" step="1" min="0" max="<?php echo isset( $meta['height'] ) ? $meta['height'] : ''; ?>" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
 							<button id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary"><?php esc_html_e( 'Scale' ); ?></button>
-							<span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>"><span class="dashicons dashicons-warning" aria-hidden="true"></span><?php esc_html_e( 'Images cannot be scaled to a size larger than the original.' ); ?></span>
 							</div>
+							<span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>"><span class="dashicons dashicons-warning" aria-hidden="true"></span><?php esc_html_e( 'Images cannot be scaled to a size larger than the original.' ); ?></span>
 						</fieldset>
 						</div>
 					</div>

Original file line number	Diff line number	Diff line change
`@@ -901,7 +901,7 @@ border color while dragging a file over the uploader drop area */`
`901`	`901`	`}`
`902`	`902`
`903`	`903`	`.imgedit-settings {`
`904`		`- max-width: 400px; /* Prevent reflow when help info is expanded. */`
	`904`	`+ max-width: 240px; /* Prevent reflow when help info is expanded. */`
`905`	`905`	`}`
`906`	`906`
`907`	`907`	`.imgedit-group-controls > * {`