Make WordPress Core

Opened 2 years ago

Closed 23 months 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 2 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 2 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 2 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 2 years ago.
input[type="number"] on Reading Setting page (for reference)
54219.patch (353 bytes) - added by aezazshekh 2 years ago.
added patch
54219.2.patch (354 bytes) - added by mukesh27 2 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
2 years ago

Patch file with fix

@Ankit K Gupta
2 years ago

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

@aezazshekh
2 years ago

added patch

@mukesh27
2 years ago

Patch created for common.css

#1 @mukesh27
2 years ago

Hi there!

Thanks for the ticket.

54219.2.patch patch created against common.css

#2 @sabernhardt
2 years ago

#54398 was marked as a duplicate.

#3 @sabernhardt
2 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
23 months ago

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

Looks good to me, thanks!

#8 @audrasjb
23 months 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.