From cf7cba3194ee1f822ab002173f760bab77317093 Mon Sep 17 00:00:00 2001
From: Mel Choyce <melchoyce@git.wordpress.org>
Date: Thu, 12 Oct 2017 03:47:29 +0000
Subject: [PATCH] Settings: Widen image size input fields on Media Settings
 page.

On narrower devices, input fields are too short to fit the number of default digits they contain. This widens the fields and also breaks each height and width attribute onto a new line for better usability, using some terrible CSS trickery. My apologies.

Props: Toru, Presskopp, desrosj, xkon, ryelle, melchoyce.
Fixes #34539.


git-svn-id: https://develop.svn.wordpress.org/trunk@41836 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css    | 17 +++++++++++++++++
 src/wp-admin/css/forms.css     |  2 +-
 src/wp-admin/options-media.php |  8 +++++---
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 3a11a58e30..1702e7736c 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -3716,6 +3716,23 @@ img {
 	}
 }
 
+.options-media-php br {
+	display: none;
+}
+
+@media screen and (max-width: 375px) {
+	.options-media-php input[type="number"][name*="_size_"] {
+		margin: 5px 0;
+	}
+	.options-media-php label[for*="_size_h"]:before {
+		content: '';
+		display: block;
+	}
+	.options-media-php br {
+		display: block;
+	}
+}
+
 @media screen and (max-width: 320px) {
 	/* Prevent default center alignment and larger font for the Right Now widget when
 	   the network dashboard is viewed on a small mobile device. */
diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 6b36d20769..665e6c0af8 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -1220,7 +1220,7 @@ table.form-table td .updated p {
 	input[type="number"].small-text,
 	.form-table input[type="text"].small-text {
 		width: auto;
-		max-width: 55px;
+		max-width: 4.375em; /* 70px, enough for 4 digits to fit comfortably */
 		display: inline;
 		padding: 3px 6px;
 		margin: 0 3px;
diff --git a/src/wp-admin/options-media.php b/src/wp-admin/options-media.php
index a948936e60..a0f8a9ebdb 100644
--- a/src/wp-admin/options-media.php
+++ b/src/wp-admin/options-media.php
@@ -55,9 +55,9 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 <label for="thumbnail_size_w"><?php _e('Width'); ?></label>
 <input name="thumbnail_size_w" type="number" step="1" min="0" id="thumbnail_size_w" value="<?php form_option('thumbnail_size_w'); ?>" class="small-text" />
 <label for="thumbnail_size_h"><?php _e('Height'); ?></label>
-<input name="thumbnail_size_h" type="number" step="1" min="0" id="thumbnail_size_h" value="<?php form_option('thumbnail_size_h'); ?>" class="small-text" /><br />
-<input name="thumbnail_crop" type="checkbox" id="thumbnail_crop" value="1" <?php checked('1', get_option('thumbnail_crop')); ?>/>
-<label for="thumbnail_crop"><?php _e('Crop thumbnail to exact dimensions (normally thumbnails are proportional)'); ?></label>
+<input name="thumbnail_size_h" type="number" step="1" min="0" id="thumbnail_size_h" value="<?php form_option('thumbnail_size_h'); ?>" class="small-text" />
+<p><input name="thumbnail_crop" type="checkbox" id="thumbnail_crop" value="1" <?php checked('1', get_option('thumbnail_crop')); ?>/>
+<label for="thumbnail_crop"><?php _e('Crop thumbnail to exact dimensions (normally thumbnails are proportional)'); ?></label></p>
 </td>
 </tr>
 
@@ -66,6 +66,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 <td><fieldset><legend class="screen-reader-text"><span><?php _e('Medium size'); ?></span></legend>
 <label for="medium_size_w"><?php _e('Max Width'); ?></label>
 <input name="medium_size_w" type="number" step="1" min="0" id="medium_size_w" value="<?php form_option('medium_size_w'); ?>" class="small-text" />
+<br />
 <label for="medium_size_h"><?php _e('Max Height'); ?></label>
 <input name="medium_size_h" type="number" step="1" min="0" id="medium_size_h" value="<?php form_option('medium_size_h'); ?>" class="small-text" />
 </fieldset></td>
@@ -76,6 +77,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 <td><fieldset><legend class="screen-reader-text"><span><?php _e('Large size'); ?></span></legend>
 <label for="large_size_w"><?php _e('Max Width'); ?></label>
 <input name="large_size_w" type="number" step="1" min="0" id="large_size_w" value="<?php form_option('large_size_w'); ?>" class="small-text" />
+<br />
 <label for="large_size_h"><?php _e('Max Height'); ?></label>
 <input name="large_size_h" type="number" step="1" min="0" id="large_size_h" value="<?php form_option('large_size_h'); ?>" class="small-text" />
 </fieldset></td>