Image Sizes input fields on Media Settings page is too small

[Toru]

On Media Settings page, when viewed on smartphones (or under 784 pixel width), input field for Image Sizes are shorten, and "max-width: 55px" kicks in. When the input value is 3 digits, it is ok, but when 4 digits, 1 digit is not shown. The "max-width: 55px" needs to modified.

Please see captures on Chrome developer tools - iPhone 5, 6, 6 plus.

[Toru]

Media setting on iPhone 5

[Toru]

Media setting on iPhone 6

[Toru]

Media setting on iPhone 6 plus

[Toru]

Change max-width from 55px to 70px

[Presskopp]

Following the bug scrub on slack today, here comes a refreshed patch.

We have this (only) in

\wp-admin\options-discussion.php
\wp-admin\options-general.php
\wp-admin\options-media.php
\wp-admin\options-reading.php
\wp-admin\options-writing.php

and therefore this should be a non breaking fix (despite the fact that it get's ugly all around when you constrict the browser window to a very small size..)

[desrosj]

iPhone 5 after patch

[desrosj]

I was able to reproduce the issue on each of the screens mentioned by @Presskopp, and the patches (which are identical) fixed the problem on iPhone 6/6 plus up, and the Android devices I was able to test (using the Chrome inspector), but on iPhone 5 the length causes the height fields to bump to the next line (see screenshot).

It is worth noting that this change will fix the Discussion, Media, Reading, and Writing settings pages because of the expected input data unlikely being more than 4 characters long (width & height, posts to display, days to close post comments after, top level comments to display on one page, port number), but will not fix the General settings page fields.

The General settings page uses .small-text for a PHP date format strings for dates and times (and has a separate CSS definition), which could easily become too long for the new width. I opened a separate ticket for this (#41603) problem.

[desrosj]

iPhone 6 after patch

[joemcgill]

Looks like we need to do some more work here to avoid the strange wrapping behavior on smaller screens. Something as simple as a targeted media query to only apply the wider input size above ~350px could do the trick, but it may be worth looking at the base HTML there and seeing if we can make those media label/inputs break to two lines on smaller devices.

[xkon]

Preview of new line fix

[xkon]

Add new line under 375px

[xkon]

After following the discussion I've added the previous width fix into 34539.3.diff and also added some simple spans with a minor css update to convert those fields into new lines as proposed by @joemcgill .

I've added the css into common.css instead of forms as I guess it could be used elsewhere as well if needed in the future. I don't know if that was the correct choice though so please advice if I have to move it to forms or add any other changes.

Tests on windows look ok but I have no access on a Mac so if somebody could have a look at it on Safari etc would be awesome.

Best regards,
Konstantinos

[melchoyce]

Anything we can do so the second line of each label aligns with the first?

[karmatosed]

I think adding this in is better than what we have, although ideally sorting the text wrap would be good.

[melchoyce]

You know what, let's just commit what we have and worry about text wrapping later. @desrosj, want to do a final review?

[melchoyce]

In 41836:

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.

[afercia]

Was reading the related #42724 and came back here for some background. I've noticed in this ticket there isn't an uploaded patch that contains the changes that were committed. I'd like to kindly remind that uploading a patch is essential for review from other contributors, discussion, and history.

[SergeyBiryukov]

In 42864:

Media: On Media Settings screen, make the pairs of labels and inputs always stacked vertically, on both mobile and desktop screens.

Make <br /> tags on the screen behave as line breaks again after [41836]. Add a missing fieldset + legend for better accessibility.

Props afercia, RavanH, obenland, garrett-eclipse.
Fixes #42724. See #34539.

[SergeyBiryukov]

In 42865:

Media: On Media Settings screen, make the pairs of labels and inputs always stacked vertically, on both mobile and desktop screens.

Make <br /> tags on the screen behave as line breaks again after [41836]. Add a missing fieldset + legend for better accessibility.

Props afercia, RavanH, obenland, garrett-eclipse.
Merges [42864] to the 4.9 branch.
Fixes #42724. See #34539.