Administration: Responsive list tables: the toggle-row button escapes its row and overlaps the Help/Screen Options tabs

[khokansardar]

Introduced in [62838] / #32892, which moved scope="row" from the checkbox column to the primary column: the primary cell is now <th scope="row"> and the checkbox cell is now <td>. That commit updated many selectors additively, but two in the @media screen and (max-width: 782px) block in wp-admin/css/list-tables.css were missed.

Steps to reproduce

1. Set the browser viewport to 782px or narrower.
2. Go to Posts (edit.php). Same on Pages, Comments, Users, Media list mode.
3. Observe the toggle-row chevron rendered in the top right of the page, overlapping the "Help" / "Screen Options" tabs.
4. Click the Help tab.

Expected: Help panel opens.

Actual: A list table row expands instead, rendering its columns as a narrow strip of one-character-per-line text. The Help panel never opens — the button covers the tab and wins the hit test.

Cause

1. Primary cell has no positioning context

.toggle-row is position: absolute; right: 8px; top: 10px, but this rule still only matches td:

.wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column) {
      position: relative;
      clear: both;
      width: auto !important;
}

The primary cell is now a th and stays position: static, so the button resolves against #wpbody (position: relative). Every row's button lands at the same place — measured top: 56, left: 734 on edit.php, while #screen-meta-links spans 530-772 x 46-86. elementFromPoint() over the Help tab returns BUTTON.toggle-row. The th also loses clear: both and width: auto !important.

2. Expanded rows do not stack

.wp-list-table .is-expanded td:not(.hidden) {
      display: block !important;
}

This never matches the primary th, so on expand the th stays table-cell at 720px while the sibling tds become blocks squeezed into an anonymous cell - measured 8px wide each. It also now wrongly matches td.check-column (formerly a th, so formerly excluded), overriding the display: table-cell that [62838] added for it.

Affected

• Posts, Pages, all custom post types
• Comments
• Users
• Media (list mode)
• Application Passwords
• Any list table on the generic WP_List_Table::single_row_columns() path

The Plugins and Network Themes screens are broken by the same th/td swap through a different rule, tracked separately.

[62838] / #32892 moved scope="row" from the checkbox column to the primary column, so the primary cell is now <th scope="row"> and the checkbox cell is now <td>. That changeset updated many selectors additively, but two in the @media screen and (max-width: 782px) block of wp-admin/css/list-tables.css still only match td.

1. The primary cell has no positioning context. .toggle-row is position: absolute; right: 8px; top: 10px, but the rule supplying its containing block (… td:not(.check-column) { position: relative; … }) never matches the new th. The cell stays position: static, so the button resolves against #wpbody instead. Every row's button lands in the same spot — measured top: 56, left: 734 on edit.php at 782px, while #screen-meta-links spans 530–772 × 46–86. elementFromPoint() over the Help tab returns BUTTON.toggle-row, so the buttons cover the Help and Screen Options tabs and steal their clicks.

2. Expanded rows do not stack. .wp-list-table .is-expanded td:not(.hidden) never matches the primary th, so on expand the th stays table-cell at 720px while the sibling tds become blocks squeezed into an anonymous cell — 8px wide each, rendering Author / Categories / Date one character per line. That rule also now wrongly matches td.check-column (formerly a th, so formerly excluded).

### Changes

Two additive selector changes, following the approach [62838] states for itself — "styles are additive, to retain support for custom list table implementations":

• Add th:not(.check-column) to the rule that establishes the positioning context, scoped to tbody. The existing td selector is only accidentally safe in the header, because thead/tfoot contain exactly one td and it is .check-column; header cells are all th, so an unscoped th selector would leak position: relative, clear: both and width: auto !important into thead/tfoot, where the !important would silently override .wp-list-table thead th.column-primary { width: 100% }.
• Add a th selector to the .is-expanded rule and exclude .check-column from both halves, restoring the checkbox cell to display: table-cell. Without that exclusion the row collapses entirely: the checkbox becomes a block, the title drops to 60px and every remaining cell to 38px.

No PHP, JS or RTL changes are needed — list-tables-rtl.css and list-tables.min.css are generated build artifacts.

Affects Posts, Pages, all custom post types, Comments, Users, Media (list mode), Application Passwords, and anything on the generic WP_List_Table::single_row_columns() path. The Plugins and Network Themes screens are broken by the same th/td swap through a different rule, tracked separately.

### How to test

1. Set the browser viewport to 782px or narrower and go to Posts (edit.php).
2. Before: the row chevrons are missing and a stray arrow sits on the Help tab; clicking Help expands a row instead, rendering its columns as a narrow strip of one-character-per-line text.
3. After: each row has its own chevron at the right edge of the title cell, Help and Screen Options work, and expanding a row stacks Author / Categories / Tags / Comments / Date full width with their labels.
4. Repeat on Pages, Comments, Users and Media (list mode). Confirm nothing changed at 783px and above, and that Quick Edit still opens at 782px.

Verified on all five screens at 782px, plus 480px and 783px; thead/tfoot primary th unchanged; Quick Edit unaffected; and a row rewritten to the pre-[62838] shape (th.check-column + td.column-primary) behaves identically, so custom list tables still rendering the primary column as a td are unaffected.

[joedolson]

Duplicate of #65743.

Duplicate of https://core.trac.wordpress.org/ticket/65743

[joedolson]

Thanks for reporting! This is already being tracked.