WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 5 weeks ago

#34539 closed defect (bug) (fixed)

Image Sizes input fields on Media Settings page is too small

Reported by: Toru Owned by: melchoyce
Milestone: 4.9 Priority: normal
Severity: normal Version:
Component: Media Keywords: good-first-bug ui-feedback has-patch has-screenshots
Focuses: ui, administration 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 2 years ago.
Media setting on iPhone 5
media-settings-iphone6.png (89.5 KB) - added by Toru 2 years ago.
Media setting on iPhone 6
media-settings-iphone6plus.png (69.1 KB) - added by Toru 2 years ago.
Media setting on iPhone 6 plus
34539.diff (414 bytes) - added by Toru 2 years ago.
Change max-width from 55px to 70px
34539.2.diff (419 bytes) - added by Presskopp 5 months ago.
Screen Shot 2017-08-10 at 10.06.58 AM.png (106.8 KB) - added by desrosj 3 months ago.
iPhone 5 after patch
Screen Shot 2017-08-10 at 10.29.34 AM.png (138.9 KB) - added by desrosj 3 months ago.
iPhone 6 after patch
34539.3.png (32.1 KB) - added by xkon 3 months ago.
Preview of new line fix
34539.3.diff (3.4 KB) - added by xkon 3 months ago.
Add new line under 375px

Download all attachments as: .zip

Change History (31)

@Toru
2 years ago

Media setting on iPhone 5

@Toru
2 years ago

Media setting on iPhone 6

@Toru
2 years ago

Media setting on iPhone 6 plus

#1 @Toru
2 years ago

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

@Toru
2 years ago

Change max-width from 55px to 70px

#2 @Toru
2 years ago

  • Keywords has-patch added

#3 @mikeschroder
14 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.


5 months ago

#5 @desrosj
5 months ago

  • Keywords good-first-bug added

#6 @Presskopp
5 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
5 months ago

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


4 months ago

#8 @jbpaul17
4 months ago

  • Keywords needs-testing added

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


4 months ago

#10 @joemcgill
4 months ago

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

#11 @joemcgill
4 months ago

  • Milestone changed from Awaiting Review to 4.9

@desrosj
3 months ago

iPhone 5 after patch

#12 @desrosj
3 months 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
3 months ago

iPhone 6 after patch

#13 @joemcgill
3 months 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 months ago

Preview of new line fix

@xkon
3 months ago

Add new line under 375px

#14 @xkon
3 months 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

#15 @SergeyBiryukov
2 months ago

  • Focuses administration added

#16 @melchoyce
8 weeks ago

  • Keywords has-screenshots added

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


8 weeks ago

#18 @melchoyce
8 weeks ago

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

#19 @karmatosed
8 weeks ago

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

#20 @melchoyce
6 weeks ago

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

#21 @melchoyce
5 weeks ago

  • Owner changed from desrosj to melchoyce

#22 @melchoyce
5 weeks ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

Note: See TracTickets for help on using tickets.