WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 7 months ago

Last modified 2 months 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 3 years ago.
Media setting on iPhone 5
media-settings-iphone6.png (89.5 KB) - added by Toru 3 years ago.
Media setting on iPhone 6
media-settings-iphone6plus.png (69.1 KB) - added by Toru 3 years ago.
Media setting on iPhone 6 plus
34539.diff (414 bytes) - added by Toru 3 years ago.
Change max-width from 55px to 70px
34539.2.diff (419 bytes) - added by Presskopp 11 months ago.
Screen Shot 2017-08-10 at 10.06.58 AM.png (106.8 KB) - added by desrosj 10 months ago.
iPhone 5 after patch
Screen Shot 2017-08-10 at 10.29.34 AM.png (138.9 KB) - added by desrosj 10 months ago.
iPhone 6 after patch
34539.3.png (32.1 KB) - added by xkon 9 months ago.
Preview of new line fix
34539.3.diff (3.4 KB) - added by xkon 9 months ago.
Add new line under 375px

Download all attachments as: .zip

Change History (35)

@Toru
3 years ago

Media setting on iPhone 5

@Toru
3 years ago

Media setting on iPhone 6

@Toru
3 years ago

Media setting on iPhone 6 plus

#1 @Toru
3 years ago

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

@Toru
3 years ago

Change max-width from 55px to 70px

#2 @Toru
3 years ago

  • Keywords has-patch added

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


11 months ago

#5 @desrosj
11 months ago

  • Keywords good-first-bug added

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

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


10 months ago

#8 @jbpaul17
10 months ago

  • Keywords needs-testing added

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


10 months ago

#10 @joemcgill
10 months ago

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

#11 @joemcgill
10 months ago

  • Milestone changed from Awaiting Review to 4.9

@desrosj
10 months ago

iPhone 5 after patch

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

iPhone 6 after patch

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

Preview of new line fix

@xkon
9 months ago

Add new line under 375px

#14 @xkon
9 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
8 months ago

  • Focuses administration added

#16 @melchoyce
8 months ago

  • Keywords has-screenshots added

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


8 months ago

#18 @melchoyce
8 months ago

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

#19 @karmatosed
8 months ago

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

#20 @melchoyce
7 months 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
7 months ago

  • Owner changed from desrosj to melchoyce

#22 @melchoyce
7 months 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.

#23 @afercia
4 months ago

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.

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


3 months ago

#25 @SergeyBiryukov
2 months ago

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.

#26 @SergeyBiryukov
2 months ago

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.

Note: See TracTickets for help on using tickets.