Post Options Divider Missing in Mobile View on Post List Page (WP-Admin) (Playground)

[dhrumilk]

On the Posts > All Posts admin screen in WordPress, the visual divider between post options (Edit, Quick Edit, Trash, View) is missing in the mobile view. This leads to a slightly cluttered UI and lack of clarity between available actions.

Steps to Reproduce:

• Open Playground (​https://playground.wordpress.net/)
• Navigate to Posts > All Posts.
• Resize the browser window to simulate a mobile view (or open it on a mobile device).
• Observe the row containing post actions like Edit, Quick Edit, Trash, and View.

Expected Behavior:

A visible divider or spacing should clearly separate post options even in mobile view, maintaining the usability and aesthetics of the admin interface.

Actual Behavior:

There is no visible divider or spacing between the post options in mobile view, making the UI appear cluttered and harder to interact with.

Environment Details:

Wordpress Playground (​https://playground.wordpress.net/)

[dhrumilk]

​https://github.com/WordPress/wordpress-playground/issues/2276

[mikinc860]

To resolve the issue of hidden row actions in the Posts list view on mobile devices, the following CSS rule should be modified in:

wp-admin/css/list-tables.css

Problematic Rule:

@media screen and (max-width: 782px) {
    body:not(.plugins-php) .row-actions {
        display: flex;
        flex-wrap: wrap;
        color: transparent;
        gap: 8px;
    }
}

Recommended Fix:

    body:not(.plugins-php) .row-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

color: transparent; is incorrectly hiding the action links (Edit, Trash, View, etc.) on mobile screen widths (max-width: 782px).

Removing this line restores default link visibility and ensures consistent UX across all screen sizes.

[sandeepdahiya]

I believe this issue is related to WordPress core and affects all list table styles, including those for posts, pages, and comments. The separator between "Edit" and "Quick Edit" actions is not visible on screen sizes below 782px. This appears to be caused by the following CSS rule:

.row-actions span {
    font-size: 0;
}

which needs to be changed to 13px or so. This rule is defined under

 @media screen and (max-width: 782px)

in wp-admin/css/list-tables.css. Addressing this properly may require a separate ticket.

#63574

👀

👀

Hi @iamsandeepdahiya,
The spacing issue is because of code ​here These are the fix for trac ticket https://core.trac.wordpress.org/ticket/63277 and was introduce in changeset 60267, The goal is to resolve the visual misalignment between comments and the Activity widget. The issue is in Approve/unapprove:

The root cause appears to be the use of the "| " prefix applied via the ::before pseudo-selector on the Approve/Unapprove actions, which introduces extra spacing. To address this, I’ve proposed the following patch:

diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index 309dd39ecf..11b20850e7 100644
--- a/src/wp-admin/css/list-tables.css
+++ b/src/wp-admin/css/list-tables.css
@@ -2075,10 +2075,6 @@ div.action-links,
 		gap: 8px;
 	}
 
-	.comment .row-actions span {
-		font-size: 0;
-	}
-
 	.row-actions span a,
 	.row-actions span .button-link {
 		display: inline-block;
@@ -2086,16 +2082,6 @@ div.action-links,
 		line-height: 1.5;
 	}
 
-	.row-actions span.approve:before,
-	.row-actions span.unapprove:before {
-		content: "| ";
-	}
-
 	/* Quick Edit and Bulk Edit */
 	#wpbody-content .quick-edit-row-post .inline-edit-col-left,
 	#wpbody-content .quick-edit-row-post .inline-edit-col-right,

This approach resolves the issue while maintaining visual consistency across the UI. I’ve implemented the change accordingly.

Would love to hear your thoughts or suggestions on this!

Dashboard: -

Posts and Pages: -

Comments:-

This update looks as expected and provides an essential improvement for mobile users across posts, pages, and the comments section.

[ravigadhiyawp]

Test Report

Description

This report validates whether the indicated patch works partially.

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/8993.diff

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 137.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ The main issue is resolved via patch. Means vertical line is showing now in mobile everywhere.
2. ❌ However, the vertical divider appears off-center between the two links.

Additional Notes

• Still need to improve the CSS, as the spacing before and after the divider is not consistent.

Supplemental Artifacts

Screenshot 1: ​https://prnt.sc/GVkEhkSGEhCU
Screenshot 2: ​https://prnt.sc/EBIjaVRaH_gj

[joedolson]

In my opinion, this change doesn't have any accessibility impact; it is an improvement, and I support it, but I'm removing the accessibility focus. Happy to hear alternate opinions, however.