Viewport related admin dashboard display issues.

[afragen]

In WP7.1-beta3 this issue doesn't exist, in trunk it does. Both of these issues seem to be related to the viewport. I don't see them in a normal sized browser, but when you re-size the browser window to mobile size they appear. I first noticed this in mobile.

In the Plugins page, the background display of an active plugins is empty under the checkbox. The CSS is also messed up.

The WP_List_Table disclosure triangle is missing. You can easily see this on the All Posts page.

This has been initially reported in ​https://wordpress.org/support/topic/styling-error-in-latest-nightly/

It's easiest to see using ​https://playground.wordpress.net/?wp=trunk

[joedolson]

Undoubtedly related to https://core.trac.wordpress.org/changeset/62838

[joedolson]

SEe #32892

Work in progress

Trac ticket: https://core.trac.wordpress.org/ticket/65743

## Use of AI Tools

[afragen]

I’ll test PR and report back. Thanks Joe.

[khokansardar]

After PR 12737: Posts list at 606px - disclosure triangle restored, toggle-row anchored to th.column-primary.

[khokansardar]

After PR 12737: expanded row collapses - th.title 60px and every td 38px, crammed into the 2.5em first column.

[khokansardar]

PR 12737 plus .wp-list-table .is-expanded td.check-column { display: table-cell !important; } - expanded row correct, all cells 544px, row height 968px to 213px.

[khokansardar]

After PR 12737: Plugins screen still broken - th.plugin-title stays display:table-cell (169px) and the empty background under the checkbox remains.

[khokansardar]

Before (trunk @ fd04681823 / r62868): Posts list at 606px viewport - disclosure triangle missing, toggle-row escapes the row.

[khokansardar]

Before (trunk): Plugins screen at 606px with an active plugin - description column squeezed to 69px, empty background under the checkbox.

[khokansardar]

Patch testing report

Patch / PR tested

• ​https://github.com/WordPress/wordpress-develop/pull/12737
• trunk @ fd04681823 (r62868) with the PR diff applied

Environment

WordPress: 7.1-beta3-62828-src
PHP: 8.2.18 (Docker)
MySQL: 8.0.36
OS: macOS 26.5.2
Browser: Chromium, mobile viewport 606px (below the 782px breakpoint)
Local wordpress-develop @ ​http://localhost:8889

Steps

1. On trunk, resize the browser below 782px and open /wp-admin/edit.php.
2. Confirm the disclosure triangle is missing; record the toggle button's offsetParent.
3. Open /wp-admin/plugins.php with an active plugin; record cell geometry.
4. Apply PR 12737, reload with the stylesheet cache busted, and repeat steps 1-3.
5. Expand a row on Posts and on Comments; record each cell's display value and bounding rect.
6. Open Quick Edit on Posts.
7. Compare row-actions spacing on plugins.php and in the dashboard Activity widget.
8. Re-run with each hunk applied in isolation, to attribute each behaviour to a specific rule.

Results

• Disclosure triangle, Posts: pass - the toggle button's offsetParent moves from a DIV (rect 558,56, outside the row) to TH.column-primary (rect 545,415). Before: 65743-1-trunk-posts-no-disclosure-triangle.jpg​ After: 65743-3-pr12737-posts-triangle-restored.jpg​
• Disclosure triangle, Users and Comments: pass - the primary th is position:relative and the toggle is anchored in-row.
• Quick Edit at mobile width: pass - the inline-edit row opens full width, no layout change.
• Expanded row, Posts: fail - with both layout hunks applied, th.title collapses to 60px and every td to 38px, all crammed into the 2.5em first column. Isolating the hunks: trunk gives th.title 544px with 8px meta slivers; hunk 1 alone gives a readable 272px/272px split; hunks 1 and 2 together give the 38px collapse. So the patched expanded row is worse than trunk. See 65743-4-pr12737-expanded-row-collapsed.jpg​
• Expanded row, Comments: fail - same failure, th.comment 60px by 4149px.
• Plugins screen, active plugin: fail - th.plugin-title stays display:table-cell (169px) while its sibling tds are display:block, so the row does not stack, and the empty background under the checkbox reported in this ticket remains (elementFromPoint over that strip returns TR.active, rgb(255,255,255)). The description column does widen from 69px to 358px, so the screen is improved but the reported symptom is not resolved. Before: 65743-2-trunk-plugins-description-squeezed.jpg​ After: 65743-6-pr12737-plugins-still-broken.jpg​
• Row-actions spacing: fail - on plugins.php .row-actions computes to display:block with gap:normal, so the flex gap does not compensate for the reduced padding.

Conclusion
PR #12737 correctly identifies the cause: [62838] moved the row header to the primary column and made the check column a td, so two mobile rules that still key off td no longer match the primary cell. Hunk 1 fixes the disclosure triangle and is right in effect, though ".wp-list-table th" is broader than needed - it drops the "tr:not(.inline-edit-row):not(.no-items)" scoping and the ":not(.check-column)" exclusion, and applies "width: auto !important" to every thead and tfoot th, overriding ".wp-list-table thead th.column-primary { width: 100% }". I could not produce a visible regression from that breadth on core screens, since fixed table layout takes column widths from the header row, but a selector scoped to the row header cell would be safer for custom list tables still rendering th.check-column.

Three things look like they should change before this lands:

1. Hunk 2 is necessary but incomplete, and on its own it makes the expanded row worse than trunk. Because ".wp-list-table .is-expanded td:not(.hidden)" now also matches td.check-column, promoting the primary th to block leaves the row with no table-cell at all, so every block child is wrapped in a single anonymous cell that inherits the 2.5em first column. Adding ".wp-list-table .is-expanded td.check-column { display: table-cell !important; }" alongside hunk 2 restores the correct full-width stacked layout. Verified by applying each hunk separately: hunk 2 without this rule collapses every cell to 38px; this rule without hunk 2 yields a 272px two-column split; both together give full-width 544px cells, with the row height dropping from 968px to 213px. See 65743-5-with-check-column-rule-expanded-correct.jpg​
2. The Plugins screen is not fixed. "#wpbody-content .wp-list-table.plugins td { display: block; width: auto; padding: 10px 9px; }" needs to cover the th as well. Note that the plugins header row also needs checking, since forcing the title cell to block shifts the thead column distribution.
3. Hunk 3 (row-actions padding "4px 16px 4px 0" to "4px 8px 4px 0") looks out of scope here, and the rationale does not seem to hold. The flex and gap rule is scoped to "body:not(.plugins-php)", and on plugins.php .row-actions is display:block with no gap, so this halves the only spacing between adjacent action links on that screen. The 16px was added in [7fdef4e629] for Activity widget alignment, years after the gap rule was introduced. This may be better as its own ticket.

Happy to retest once the branch is updated.

---

AI disclosure

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5
Used for: Driving the local Docker environment, executing the test scenarios, collecting the measurements and screenshots above, and drafting this report. Reviewed by me before posting.

[mirmpro]

Test Report

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

Environment

• WordPress: trunk
• Subdirectory: No
• PHP: 7.4.33
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
• Browser: Chrome 150.0.0.0 (using Chrome Developer Tools Google Pixel 7 mobile emulator)
• OS: macOS
• Theme: Twenty Twenty-Five 1.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.3.0

Steps taken

1. Launched the WordPress trunk testing environment using the Playground PR URL for pull request.
2. Opened Chrome Developer Tools, enabled device emulation, and selected Google Pixel 7 as the target mobile simulator.
3. Navigated to Posts → All Posts and verified that the missing WP_List_Table disclosure triangle icon is successfully restored.
4. Navigated to Plugins → Installed Plugins and checked the active plugin background/name display. Observed that while list tables are fixed, the plugin title styling still appears oversized on mobile viewports as reported in Trac #65743.

• ✅ Patch is solving the problem partially

Expected result

• Viewport-related display regressions on mobile screens (such as missing list table disclosure triangles and broken table row layouts) should be resolved.

Additional Notes

• Pull request successfully restores the WP_List_Table disclosure triangles when tested on the Google Pixel 7 emulator profile. However, additional CSS polish may still be needed for the Plugins page layout where plugin titles appear disproportionately large.

Screenshots/Screencast with results

• Reference Trac Ticket #65743 attachment screenshot_867.png for visual comparison.
• Before pulled patch https://core.trac.wordpress.org/attachment/ticket/65743/BeforePatch.png
• After Before pulled patch https://core.trac.wordpress.org/attachment/ticket/65743/AfterPatch.png

Support Content

• Website Playground URL with parameters used for testing:
• ​https://playground.wordpress.net/?core-pr=12737#%7B%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22landingPage%22:%22/wp-admin%22,%22login%22:true,%22preferredVersions%22:%7B%22php%22:%227.4%22%7D,%22features%22:%7B%22networking%22:true%7D%7D
• Patch URL: https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/12737.diff

[joedolson]

@mirmpro @khokansardar Please note that one of the reasons for marking a PR as draft is because it's incomplete. So, while your work is appreciated, this was all already known. I suggest avoiding spending time testing draft PRs, as it's generally not the most productive use of time.

[mirmpro]

Replying to joedolson:

@mirmpro @khokansardar Please note that one of the reasons for marking a PR as draft is because it's incomplete. So, while your work is appreciated, this was all already known. I suggest avoiding spending time testing draft PRs, as it's generally not the most productive use of time.

Thank you very much. When I pulled the PR, it wasn't marked as a draft as far as I can recall. However, I could be wrong. Thank you for the reminder!

I'm confident there are still things missing here, but it's functional, and ready for review.

This switches the responsive layout to use flex. It will need some polish on padding; I'm somewhat of the opinion that losing the space to the left, under the checkbox, is actually a good thing, as it gives a bit more width for the additional text.

[habiburdev]

I tested this issue on trunk using WordPress Playground at narrow/mobile viewports.

Testing Results

• Environment: WordPress Trunk (via WordPress Playground)
• Page: /wp-admin/plugins.php

Observations

• Confirming that the issue is still reproducible on trunk.
• On narrow screens/mobile viewports, the plugin list table column layout breaks down:
  • The plugin description text gets squished into an extremely narrow right-side column and overflows horizontally off the screen.
  • The text is clipped and hard to read instead of stacking vertically or wrapping properly.

(See attached screenshot)

Reviewed in Playground. All issues seem resolved. I'm still getting used to the collapse of space under the checkbox, but I'm OK with it.

*Patch Test Report*

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

I tested this issue on *trunk* using WordPress Playground across narrow/mobile viewports.

### Testing Results

• *Environment:* WordPress Trunk (via WordPress Playground)
• *Page:* Plugins

### Observations

• *Status:* Confirmed reproducible on trunk.
• *Issue:* On narrow screens/mobile viewports, the plugin list table column layout breaks down:
  • The plugin description text compresses into an extremely narrow right-hand column and overflows horizontally off-screen.
  • The text gets clipped and unreadable instead of stacking vertically or wrapping properly.

Besides @sabernhardt's suggestion, I noticed only a few minor things that I'd consider _optional_ to fix. This PR solves the main issue and looks good. Personally, I'm OK with the removal of the space under the checkbox.

1
The plugin title font size looks slightly bigger on trunk (left) compared to 7.0 (right):

2
In the post panel, the spacing between the row actions links is slightly different:

3

The checkbox of the active plugins is no longer horizontally aligned with the other checkboxes:

4

Pre-existing issue, can be reproduced on 7.0 too: in the Plugins table, the padding of the cell for the checkbox in the table header is different compared to the one for the Posts table. This impacts the alignment of the checkbox with the th text 'Plugin':

[afercia]

The linked PR looks good to me. I left only a few minor comments.

[joedolson]

#65763 was marked as a duplicate.

Updated all of the items noted by @sabernhardt and @afercia; also identified an issue with excerpt view and supporting plugins that insert table cells between check-column and column-primary and fixed those. Reverted the change to row actions, which isn't really related to this, and I think requires further consideration.

Active plugin row highlighting now render correctly at mobile viewport widths on both Plugins and All Posts pages.✅

Plugins List After	Post List After

| |

[joedolson]

Marking for commit.

[joedolson]

In 62958:

Administration: Fix list table mobile viewports.

Follow up to [62838]. The changes to move column headers to the post title column did not account for the responsive tables in mobile viewports.

Modernizes layout of responsive tables to use flex layout. Visual change expected, aligning the toggled hidden cells under the full row, including the checkbox, rather than only under the title column. Update several other styles to fix alignment changes caused by the th adjustment.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/12737

Props afragen, khokansardar, mirmpro, habiburdev, sabernhardt, afercia, shailu25, joedolson.
Fixes #65743.

[nazmulasif]

@joedolson i missed the props though i participated in the ticket. Could you please check?

[afragen]

I was just checking this again and in sites running ng 7.1-RC3 and trunk are now broken again. The list table dropdown is present but opening it is problematic.

Also the same background issues are present in an active plugin in the plugin list view.

Mea culpa. My issue.

[afragen]

The above site is running 7.1-RC3 on an iPhone 17. This doesn't show in playground.

Issue was specific to one of my plugins.