Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#48815 closed defect (bug) (fixed)

Select comment checkbox is partially hidden on pending comments in mobile

Reported by: jeremyfelt's profile jeremyfelt Owned by: audrasjb's profile audrasjb
Milestone: 5.3.1 Priority: normal
Severity: normal Version: 5.3
Component: Comments Keywords: has-patch has-screenshots commit
Focuses: ui, css Cc:

Description

A 4px border is added to comments that are pending approval in the comments list table. In a mobile view, this causes a small part of the select comment checkbox to hide behind the next cell.

I played around with adding margin-left: 4px to that next cell, but I'm not sure that's the right answer.

Attachments (6)

Screen Shot 2019-11-27 at 10.17.08 AM.png (20.0 KB) - added by jeremyfelt 5 years ago.
comments-mobile-fixed.png (4.4 KB) - added by marcelo2605 5 years ago.
48815.patch (786 bytes) - added by marcelo2605 5 years ago.
48815.1 (404 bytes) - added by waleedt93 5 years ago.
Rather changing checkbox size for all list tables, checkbox size should only be update for comments list table.
48815.2.diff (408 bytes) - added by audrasjb 5 years ago.
Avoid checkboxes to be partially hidden on awaiting moderation comments on small screens
d3ed15fcadb8049f7200a56eed82a6cc.gif (1.5 MB) - added by audrasjb 5 years ago.
48815.2.diff: Avoid checkboxes to be partially hidden on awaiting moderation comments on small screens

Download all attachments as: .zip

Change History (16)

#1 @marcelo2605
5 years ago

How about decrease a little the checkbox size?

@media screen and (max-width: 782px) { 
    input[type=checkbox], input[type=radio] {
        height: 1.4rem;
        width: 1.4rem;
    }
}
Last edited 5 years ago by marcelo2605 (previous) (diff)

@marcelo2605
5 years ago

@waleedt93
5 years ago

Rather changing checkbox size for all list tables, checkbox size should only be update for comments list table.

This ticket was mentioned in Slack in #core by peterwilsoncc. View the logs.


5 years ago

#3 @talldanwp
5 years ago

  • Keywords needs-design-feedback added
  • Milestone changed from Awaiting Review to 5.3.1
  • Version set to 5.3

Thanks for creating the ticket @jeremyfelt and for the recent patches from @marcelo2605, @waleedt93.

My feeling is that decreasing the checkbox size isn't the right way to go—it makes this checkbox non-standard and potentially reduces accessibility by making it a smaller click target. Caveat here is that I'm not a designer, so I've added the needs-design-feedback keyword though so that a designer can take a look :)

I've also added the milestone 5.3.1, seems like this would be a good thing to fix, though it could be bumped if a patch isn't ready.

Also noting @waleedt93 that your patch doesn't have the .diff or .patch file suffix on it, so doesn't apply from running

npm run grunt patch:48815

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


5 years ago

#5 @melchoyce
5 years ago

My feeling is that decreasing the checkbox size isn't the right way to go—it makes this checkbox non-standard and potentially reduces accessibility by making it a smaller click target.

Agreed! I'd rather see us address this another way.

@audrasjb
5 years ago

Avoid checkboxes to be partially hidden on awaiting moderation comments on small screens

#6 @audrasjb
5 years ago

  • Keywords has-patch has-screenshots added; needs-patch needs-design-feedback removed
  • Owner set to audrasjb
  • Status changed from new to accepted

Hi there, thank you for this ticket!

Indeed, changing the checkbox size is not what we want. Instead, I propose in 48815.2.diff to change the column width to a relative value that avoid checkboxes to be partially hidden on small screens.

Note: it happens for all small screens under the 782px breakpoint, so this patch is fixing it in all screen sizes under 782 pixels.

This patch is tested. See screenshot coming below.

Cheers,
Jb

@audrasjb
5 years ago

48815.2.diff: Avoid checkboxes to be partially hidden on awaiting moderation comments on small screens

#7 @melchoyce
5 years ago

Thanks @audrasjb, looks good to me 👍

#8 @jeremyfelt
5 years ago

  • Keywords commit added

Dig it. Thanks y'all! 💯

#9 @SergeyBiryukov
5 years ago

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

In 46845:

Administration: Correct checkbox width in list tables on smaller screens.

Previously, checkboxes for pending comments were partially hidden due to an added 4px border.

Props audrasjb, jeremyfelt, talldanwp, melchoyce, marcelo2605, waleedt93.
Fixes #48815.

#10 @SergeyBiryukov
5 years ago

In 46846:

Administration: Correct checkbox width in list tables on smaller screens.

Previously, checkboxes for pending comments were partially hidden due to an added 4px border.

Props audrasjb, jeremyfelt, talldanwp, melchoyce, marcelo2605, waleedt93.
Merges [46845] to the 5.3 branch.
Fixes #48815.

Note: See TracTickets for help on using tickets.