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

@@ -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. */

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;