WordPress.org
Get WordPress

Make WordPress Core

Opened 3 years ago

Closed 2 years ago

#54219 closed defect (bug) (fixed)

Updated 'screen-per-page' padding for better navigation appearance on all Screen Options > Pagination

Reported by: ankit-k-gupta's profile Ankit K Gupta Owned by: audrasjb's profile audrasjb
Milestone: 6.0 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch commit assigned-for-commit
Focuses: ui, css, administration Cc:

Description

'Number of items per page' option available under 'Screen Options', is misaligned due to common padding being used on multiple input types. Although other input[type="number"] available on 'Reading Settings' look fine.

Added specific padding for input[type="number"].screen-per-page. So all 'screen-per-page' arrows are properly aligned on all screens like Posts listing, Pages listing, Plugins.php, edit-comments.php, users.php, export-personal-data.php, erase-personal-data.php

Attachments (7)

54219.diff​ (434 bytes) - added by Ankit K Gupta 3 years ago.
Patch file with fix
Screenshot of Screenshot 2021-10-04 at 10.45.37 PM.png (909×399) (1).jpg​ (71.4 KB) - added by Ankit K Gupta 3 years ago.
Before the fix
Screenshot of Screenshot 2021-10-04 at 11.22.37 PM.png (909×399).jpg​ (71.5 KB) - added by Ankit K Gupta 3 years ago.
After the fix
Screenshot of Screenshot 2021-10-04 at 11.32.31 PM.png (953×537).jpg​ (71.7 KB) - added by Ankit K Gupta 3 years ago.
input[type="number"] on Reading Setting page (for reference)
54219.patch​ (353 bytes) - added by aezazshekh 3 years ago.
added patch
54219.2.patch​ (354 bytes) - added by mukesh27 3 years ago.
Patch created for common.css
54219-comparison.png​ (249.2 KB) - added by sabernhardt 2 years ago.
patch comparison, using Firefox 99/Windows 10

Download all attachments as: .zip

Change History (15)

@Ankit K Gupta
3 years ago

Patch file with fix

@Ankit K Gupta
3 years ago

Before the fix

@Ankit K Gupta
3 years ago

After the fix

@Ankit K Gupta
3 years ago

input[type="number"] on Reading Setting page (for reference)

@aezazshekh
3 years ago

added patch

@mukesh27
3 years ago

Patch created for common.css

#1 @mukesh27
3 years ago

Hi there!

Thanks for the ticket.

54219.2.patch​ patch created against common.css

#2 @sabernhardt
3 years ago

#54398 was marked as a duplicate.

#3 @sabernhardt
3 years ago

  • Focuses css added
  • Milestone changed from Awaiting Review to 6.0

Setting the side padding to zero (54219.2.patch​) works for me at any screen size.

And this could be better than the option of using the small-text class. I would prefer having these inputs a bit wider, though 3 digits fit within the 4em even with a larger font size (small-text has a fixed 65-pixel width on larger screens).

This ticket was mentioned in ​Slack in #core by chaion07. ​View the logs.
2 years ago

#5 @mehedi890
2 years ago

Thanks, @sabernhardt for the suggestion. I have tested with small-text class and it looks good to me.

@sabernhardt
2 years ago

patch comparison, using Firefox 99/Windows 10

#6 @sabernhardt
2 years ago

  • Keywords commit added

I was going to upload a patch with the small-text class instead, so we could compare them. However, simply changing the right padding in 54219.2.patch​ is better with text zoom and/or on smaller screens.

Recommending for commit.

#7 @audrasjb
2 years ago

  • Keywords assigned-for-commit added
  • Owner set to audrasjb
  • Status changed from new to accepted

Looks good to me, thanks!

#8 @audrasjb
2 years ago

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

In 53119:

Administration: Improved padding for pagination setting fields.

This changes improves paddings for the "Number of items per page" field available on list screens.

Props ankit-k-gupta, aezazshekh, mukesh27, sabernhardt, mehedi890.
Fixes #54219.

Note: See TracTickets for help on using tickets.