WordPress.org

Make WordPress Core

Opened 23 months ago

Last modified 3 weeks ago

#34539 reviewing defect (bug)

Image Sizes input fields on Media Settings page is too small

Reported by: Toru Owned by: desrosj
Milestone: 4.9 Priority: normal
Severity: normal Version:
Component: Media Keywords: good-first-bug ui-feedback has-patch
Focuses: ui Cc:

Description

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.

Attachments (9)

media-settings-iphone5.png (79.8 KB) - added by Toru 23 months ago.
Media setting on iPhone 5
media-settings-iphone6.png (89.5 KB) - added by Toru 23 months ago.
Media setting on iPhone 6
media-settings-iphone6plus.png (69.1 KB) - added by Toru 23 months ago.
Media setting on iPhone 6 plus
34539.diff (414 bytes) - added by Toru 23 months ago.
Change max-width from 55px to 70px
34539.2.diff (419 bytes) - added by Presskopp 3 months ago.
Screen Shot 2017-08-10 at 10.06.58 AM.png (106.8 KB) - added by desrosj 6 weeks ago.
iPhone 5 after patch
Screen Shot 2017-08-10 at 10.29.34 AM.png (138.9 KB) - added by desrosj 6 weeks ago.
iPhone 6 after patch
34539.3.png (32.1 KB) - added by xkon 3 weeks ago.
Preview of new line fix
34539.3.diff (3.4 KB) - added by xkon 3 weeks ago.
Add new line under 375px

Download all attachments as: .zip

Change History (23)

@Toru
23 months ago

Media setting on iPhone 5

@Toru
23 months ago

Media setting on iPhone 6

@Toru
23 months ago

Media setting on iPhone 6 plus

#1 @Toru
23 months ago

  • Summary changed from Media Settings to Image Sizes input fields on Media Settings page is too small

@Toru
23 months ago

Change max-width from 55px to 70px

#2 @Toru
23 months ago

  • Keywords has-patch added

#3 @mikeschroder
12 months ago

  • Component changed from Administration to Media
  • Focuses ui added

This ticket was mentioned in Slack in #core-media by desrosj. View the logs.


3 months ago

#5 @desrosj
3 months ago

  • Keywords good-first-bug added

#6 @Presskopp
3 months ago

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..)

@Presskopp
3 months ago

This ticket was mentioned in Slack in #core-media by presskopp. View the logs.


2 months ago

#8 @jbpaul17
2 months ago

  • Keywords needs-testing added

This ticket was mentioned in Slack in #core-media by desrosj. View the logs.


7 weeks ago

#10 @joemcgill
7 weeks ago

  • Owner set to desrosj
  • Status changed from new to reviewing

#11 @joemcgill
7 weeks ago

  • Milestone changed from Awaiting Review to 4.9

@desrosj
6 weeks ago

iPhone 5 after patch

#12 @desrosj
6 weeks ago

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
6 weeks ago

iPhone 6 after patch

#13 @joemcgill
4 weeks ago

  • Keywords needs-patch ui-feedback added; has-patch needs-testing removed

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
3 weeks ago

Preview of new line fix

@xkon
3 weeks ago

Add new line under 375px

#14 @xkon
3 weeks ago

  • Keywords has-patch added; needs-patch removed

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

Note: See TracTickets for help on using tickets.