WordPress.org

Make WordPress Core

Opened 7 months ago

Closed 7 months ago

Last modified 7 months ago

#48815 closed defect (bug) (fixed)

Select comment checkbox is partially hidden on pending comments in mobile

Reported by: jeremyfelt Owned by: 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 7 months ago.
comments-mobile-fixed.png (4.4 KB) - added by marcelo2605 7 months ago.
48815.patch (786 bytes) - added by marcelo2605 7 months ago.
48815.1 (404 bytes) - added by waleedt93 7 months 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 7 months ago.
Avoid checkboxes to be partially hidden on awaiting moderation comments on small screens
d3ed15fcadb8049f7200a56eed82a6cc.gif (1.5 MB) - added by audrasjb 7 months 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
7 months 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 7 months ago by marcelo2605 (previous) (diff)

@marcelo2605
7 months ago

@waleedt93
7 months 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.


7 months ago

#3 @talldanwp
7 months 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.


7 months ago

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

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

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

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

#7 @melchoyce
7 months ago

Thanks @audrasjb, looks good to me 👍

#8 @jeremyfelt
7 months ago

  • Keywords commit added

Dig it. Thanks y'all! 💯

#9 @SergeyBiryukov
7 months 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
7 months 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.