WordPress.org

Make WordPress Core

Opened 6 weeks ago

Last modified 36 hours ago

#49231 accepted defect (bug)

Plugins admin screens: form fields issue on small screens

Reported by: passoniate Owned by: audrasjb
Milestone: 5.5 Priority: normal
Severity: normal Version:
Component: Plugins Keywords: has-patch has-screenshots needs-refresh
Focuses: ui, accessibility, css Cc:

Description

Plugins admin screens: form fields issue on small screens

Attachments (13)

addplugin.png (19.0 KB) - added by passoniate 6 weeks ago.
alignmnet.png (25.6 KB) - added by passoniate 6 weeks ago.
common.css.patch (425 bytes) - added by garethgillman 3 weeks ago.
Adds margin to the select box when under 600px width
common.min.css.patch (34.9 KB) - added by passoniate 3 weeks ago.
Patch for RTL and LTR
list-tables.css.patch (129.0 KB) - added by passoniate 3 weeks ago.
Patch for RTL and LTR
common.css.2.patch (433 bytes) - added by passoniate 3 weeks ago.
common.css Patch Update
list-tables.css.2.patch (547 bytes) - added by passoniate 3 weeks ago.
list-tables.css Patch Update
49231.600.patch (881 bytes) - added by sabernhardt 8 days ago.
Sets search box top margin at 600px breakpoint and edits padding for select all checkbox
49231.782.patch (885 bytes) - added by sabernhardt 8 days ago.
Sets search box top margin at 782px breakpoint and edits padding for select all checkbox
49231.1.diff (1.0 KB) - added by maxpertici 40 hours ago.
CSS Fix for plugins search form and table list
plugins-search-form-align.png (35.8 KB) - added by maxpertici 40 hours ago.
Use inline-block for better alignment
new-margin.png (31.2 KB) - added by maxpertici 40 hours ago.
Change margin logic. Use margin on form elements instead for wrapper
49231 on WordPress 5.1.png (156.5 KB) - added by afercia 38 hours ago.
Search plugins input on WordPress 5.1 in the responsive view

Download all attachments as: .zip

Change History (30)

@passoniate
6 weeks ago

@passoniate
6 weeks ago

#1 @audrasjb
6 weeks ago

  • Focuses css added
  • Milestone changed from Awaiting Review to 5.3.3
  • Status changed from assigned to accepted

#2 @audrasjb
6 weeks ago

  • Keywords needs-patch added

Good catch. For the second issue, we should probably use:

@media screen and (max-width: 782px) {
    #wpbody-content .wp-list-table.plugins td
        padding: 10px 6px;
    }
}

Instead of

@media screen and (max-width: 782px) {
    #wpbody-content .wp-list-table.plugins td
        padding: 10px 9px;
    }
}

#3 @audrasjb
6 weeks ago

The first issue doesn't looks like a blocker to me. We may want to improve it if possible though.

#4 @audrasjb
4 weeks ago

  • Milestone changed from 5.3.3 to 5.4

Moving all unfixed tickets from 5.3.3 to milestone 5.4, as there is no plan for a 5.3.3 maintenance release for now.

@garethgillman
3 weeks ago

Adds margin to the select box when under 600px width

#5 @audrasjb
3 weeks ago

Would be great to get a patch for both issues.

@passoniate
3 weeks ago

Patch for RTL and LTR

@passoniate
3 weeks ago

Patch for RTL and LTR

#6 @passoniate
3 weeks ago

  • Keywords has-patch needs-testing added; has-screenshots needs-patch removed

#7 @audrasjb
3 weeks ago

  • Keywords needs-refresh added

Hi! Thank you for the patch!
RTL and minified versions of the file are generated automatically and don't need to be patched.

@passoniate
3 weeks ago

common.css Patch Update

@passoniate
3 weeks ago

list-tables.css Patch Update

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 weeks ago

#9 @afercia
2 weeks ago

This ticket was discussed during today's accessibility bug-scrub: it would be great to unify the various patches in just one for easier review and commit :)

#10 @audrasjb
8 days ago

  • Keywords commit added; needs-testing needs-refresh removed

Works fine on my side.
Marking this for commit.
Please note it should be committed as soon as possible or punted to 5.5 if we are not able to commit very soon :-)

#11 @sabernhardt
8 days ago

  • Keywords commit removed

@passoniate Thanks! The latest change to list-table.css looks good, but the search box's top margin is set twice in the common.css.2.patch.

Which top margin should we keep? I do not see a need for it at the 782px breakpoint. However, if I'm missing something and that should be at 782, then it's redundant to add the margin again at the 600px breakpoint.

I'll upload combined patches to review both options.

@sabernhardt
8 days ago

Sets search box top margin at 600px breakpoint and edits padding for select all checkbox

@sabernhardt
8 days ago

Sets search box top margin at 782px breakpoint and edits padding for select all checkbox

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


8 days ago

@maxpertici
40 hours ago

CSS Fix for plugins search form and table list

#13 @maxpertici
40 hours ago

Hi,
I propose a simpler fix.
What's it doing ?

1/ input and select are now aligned (inline-block on the parent label of the input)
2/ the margins (top) are directly applied to the elements to have a good space also in small screen (and the margin top of the wrapper is removed)

3/ slight correction of padding value on for table-list

See 49231.1.diff​.

@maxpertici
40 hours ago

Use inline-block for better alignment

@maxpertici
40 hours ago

Change margin logic. Use margin on form elements instead for wrapper

#14 @audrasjb
39 hours ago

  • Keywords has-screenshots commit added

Patch looks good to me, thank you @maxpertici.

Ping @afercia : it's our last window for this bugfix to land in 5.4.
In my opinion, it looks pretty self contained and good to go before RC1. Thoughts?

Last edited 39 hours ago by audrasjb (previous) (diff)

#15 @afercia
38 hours ago

  • Keywords commit removed
  • Version 5.3.2 deleted

Looking at 49231.1.diff

  • setting display: inline-block on the label alters the width of the inner search input: on the small screens view, the search input is intentionally set to have a width of 100% but now it's not full-width any longer because its container is inline-block
  • the fix for the "Select all" checkbox table cell alters the td elements also on the desktop view
  • both fixes should be applied only for the responsive view at the appropriate breakpoint

49231.782.patch seems preferable to me because it changes the CSS only in the responsive view but:

  • .wp-filter .search-form input[type="search"] is used also in the "Add Themes" page where there's now an unnecessary top margin
  • it changes all the td elements in the plugins table including the ones with the plugin names thus reducing the horizontal spacing: it should target only the "Select all" table cell

Noting that seems to me both these visual glitches happen since a long time, see the attached screenshot taken on WP 5.1.

@afercia
38 hours ago

Search plugins input on WordPress 5.1 in the responsive view

#16 @afercia
38 hours ago

P.S. I feel physical pain looking at that wrapping label :) Maybe we should consider a larger improvement and use a non-wrapping label with associated to the search field with for / id attributes, as per the WordPress accessibility coding standards. At this point of the release, that should happen in the next development cycle though.

#17 @audrasjb
36 hours ago

  • Keywords needs-refresh added
  • Milestone changed from 5.4 to 5.5

Thanks for the feedback @afercia

Moving this ticket to WP 5.5 for further investigation/testing.

Note: See TracTickets for help on using tickets.