Comment marked as spam displays poorly in mobile view

[jeremyfelt]

When a comment is marked as spam from wp-admin/edit-comments.php in a mobile view, the record of the comment with the option to undo is displayed in too small of an area rather than across the comment list table.

I believe this occurs because display of the .undo td ​is set to block in the list table CSS when it should be the default of table-cell.

Describing this is weird, so I'm attaching a GIF. :)

[lorenzof]

Hi, I created a patch for the ticket, it's my first patch so please check if everything is ok.

[lorenzof]

First patch, first mistake, I uploaded the wrong one, that's the right one

[mukesh27]

@lorenzof @jeremyfelt If we remove the display property from CSS .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column) then it will fix the issue.

[mukesh27]

Patch.

[lorenzof]

Thanks for the update @mukesh27

You removed the display property so that it inherits the table-cell value from td, and in that case there's no need to repeat the display: table-cell as I did my patch, right?

[mukesh27]

@lorenzof Yes, it will take display property from td

[razamalik]

display:block change changed with display:table-cell

[razamalik]

display:block change changed with display:table-cell and i have tested in different browsers working fine! @lorenzof

[lorenzof]

@razamalik The .2 version of the patch submitted by @mukesh27 was fine and it's the best one since it's redundant to only change the value, so why you added a new version creating a patch that's the same one I submitted as .1 version, reverting his changes? .2 is fine, that's the one that need testing

[jeremyfelt]

Thanks for the patches @lorenzof, @mukesh27, and @razamalik. If I follow correctly, it sounds like 48814.2.diff​ is the proposed solution—remove the display property for mobile?

It would also be helpful to have screenshots showing the change.

[lorenzof]

Replying to jeremyfelt:

Thanks for the patches @lorenzof, @mukesh27, and @razamalik. If I follow correctly, it sounds like 48814.2.diff​ is the proposed solution—remove the display property for mobile?

It would also be helpful to have screenshots showing the change.

Yes, that's the right one. I appreciate the help from @razamalik who probably hasn't seen my patch but the right one it's the patch from @mukesh27. Less code, same result considering that the display: table-cell is inherited. I'll attach two screenshots from latest trunk.

[lorenzof]

Comment display before

[lorenzof]

Comment display after

[jeremyfelt]

Excellent, thanks @lorenzof! I'm going to add a design feedback tag here, but I think things are looking good for 5.4.

[xkon]

After today's #design triage, I'm removing the needs-design-feedback as everything looks good :).

I was having some issues applying the patch so it might need a refresh, although it's a small change not sure if a committer can handle it directly :).

[audrasjb]

Hi,

This small change should be refreshed and committed very soon, we are currently punting the remaining tickets in milestone 5.4 to 5.5.

Thanks!
Jb

[adamsilverstein]

https://core.trac.wordpress.org/attachment/ticket/48814/48814.2.diff looks reasonable - do we need to adjust list-tables-rtl.css as well as in earlier versions of the patch?

[adamsilverstein]

I verified the rtl change is made automatically by our build script, so no need to include it in the patch. Testing in RTL (with the rtl tester plugin) the patch works as expected:

[adamsilverstein]

In 47340:

Comments: improve styling on mobile for comments marked as spam.

Correct an issue where comments marked as spam in a mobile view displayed incorrectly, filling a narrow and very tall column with the notice that a comment was marked as spam.

Props jeremyfelt, lorenzof, mukesh27, razamalik, xkon.
Fixes #48814.

[johnjamesjacoby]

Apologies, but unfortunately this minor change has caused a somewhat major regression in ​one of my plugins.

I can fix this for my users, but I am concerned about unreported breakage in other plugins due to the relatively reduced footprint of mobile users attempting to manage their content within WordPress Admin.

---

The display: block; that was removed in r47340 was necessary to override the default display: table-cell styling. Screenshot incoming to show why it is needed.

table-cell and width: auto !important will not allow for the targeted tds to occupy the full-width of the parent element.

It is also why the following rule...

.wp-list-table .is-expanded td:not(.hidden)

...still requires display: block !important;. Otherwise, it would also unintentionally risk not being full-width.

---

In the following rule, WordPress avoids applying styling to certain tr elements (including the dynamic .inline-edit-row one) using :not() - like:

.wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column)

I believe the non-breaking change here would have been to leave the display: block; alone, and then to add the unspam and untrash classes to the group of row classes not to target, like:

.wp-list-table tr:not(.inline-edit-row):not(.no-items):not(.unspam):not(.untrash) td:not(.check-column)

Will leave this up to the contributors here to decide how best to proceed. Sorry again, and thanks for looking & understanding. 💙

[johnjamesjacoby]

Mark as Spam on a Small Screen, then make your browser width wide again

[johnjamesjacoby]

Mitigated downstream in Sugar Calendar in ​this pull request.