Skip to content

Fix mobile list tables 65743 #12737

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
joedolson wants to merge 15 commits into
base: trunk
Choose a base branch
from
+71 −13
Open

Fix mobile list tables 65743 #12737

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
185ced6
Make new th position relative, so disclosure toggles show
joedolson Jul 28, 2026
a26a7bd
Row actions are flex with gap, and no longer need extra spacing.
joedolson Jul 28, 2026
be5c791
Update list-tables.css
joedolson Jul 28, 2026
08d990b
Only adjust vertical alignment on tbody th
joedolson Jul 28, 2026
813d504
Make th styles more context specific
joedolson Jul 28, 2026
0e35c64
Switch list table toggle CSS to use flex box
joedolson Jul 28, 2026
35f4536
Merge branch 'trunk' into fix-mobile-list-tables-65743
joedolson Jul 28, 2026
85c6b73
Adjust inherited font sizing for tbody th
joedolson Jul 30, 2026
acbfa4a
Revert "Row actions are flex with gap, and no longer need extra spaci…
joedolson Jul 30, 2026
bf7e0e0
Restore alteration
joedolson Jul 30, 2026
b3e327d
Realign checkbox in active plugin columns
joedolson Jul 30, 2026
8f48c5a
Fix preexisting issue in plugin header
joedolson Jul 30, 2026
0b3a96c
Move CSS into existing media query
joedolson Jul 30, 2026
e617bfa
Force links to wrap
joedolson Jul 30, 2026
7802c08
Handle additional scoped selectors for column-title
joedolson Jul 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion src/wp-admin/css/common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -501,7 +501,7 @@ code {
border-bottom-width: 0;
}

.widefat th,
.widefat tbody th,
.widefat td {
vertical-align: top;
}
Expand All @@ -520,6 +520,12 @@ code {
.widefat tfoot td {
text-align: left;
line-height: 1.3em;
}

.widefat th:not(tbody th),
.widefat tbody td.check-column,
.widefat thead td,
.widefat tfoot td {
font-size: 14px;
}

Expand Down
76 changes: 64 additions & 12 deletions src/wp-admin/css/list-tables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,13 +353,17 @@ table.fixed {
padding-left: 3px;
}

th.column-title strong,
th.plugin-title strong,
td.column-title strong,
td.plugin-title strong {
display: block;
margin-bottom: .2em;
font-size: 14px;
}

th.column-title p,
th.plugin-title p,
td.column-title p,
td.plugin-title p {
margin: 6px 0;
Expand Down Expand Up @@ -1921,32 +1925,79 @@ div.action-links,
display: none;
}

.wp-list-table thead th.column-primary {
width: 100%;
.wp-list-table tr {
display: flex;
flex-wrap: wrap;
}

/* Checkboxes need to show */
.wp-list-table tr th.check-column,
.wp-list-table tr td.check-column {
display: table-cell;
.wp-list-table thead th {
align-content: center;
}

.wp-list-table .check-column {
.wp-list-table td.check-column,
.wp-list-table th.check-column {
flex: 0 0 2.5em;
width: 2.5em;
}

.wp-list-table .column-primary a {
text-wrap: wrap;
}

.wp-list-table td.column-primary,
.wp-list-table th.column-primary {
flex: 1 1 0;
}

.wp-list-table tr td:nth-child(n+3) {
flex: 0 1 100%;
}

.plugins tr.active.plugin-update-tr + tr.inactive th,
.plugins tr.active.plugin-update-tr + tr.inactive td,
.plugins tr.active + tr.inactive th,
.plugins tr.active + tr.inactive td,
.plugins .inactive td,
.plugins .inactive th,
.plugins .active td,
.plugins .active th,
.plugin-install #the-list td,
.upgrade .plugins td,
.upgrade .plugins th {
box-shadow: none;
}

.plugins tr {
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.plugins .active th.check-column,
.plugins .active td.check-column,
.plugin-update-tr.active td {
border-left: 4px solid transparent;
}

.plugins .active th.check-column input,
.plugins .active td.check-column input {
margin-left: 0px;
}

.plugins tr.active,
.plugin-update-tr.active {
border-left: 4px solid var(--wp-admin-theme-color);
}

.wp-list-table .column-primary .toggle-row {
display: block;
}

.wp-list-table tbody th,
.wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column) {
position: relative;
clear: both;
width: auto !important; /* needs to override some columns that are more specifically targeted */
}

.wp-list-table td.column-primary,
.wp-list-table th.column-primary {
.wp-list-table tbody th.column-primary {
padding-right: 50px; /* space for toggle button */
}

Expand All @@ -1955,7 +2006,7 @@ div.action-links,
padding: 3px 8px 3px 35%;
}

.wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary)::before {
.wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column)::before {
position: absolute;
left: 10px; /* match padding of regular table cell */
display: block;
Expand All @@ -1966,6 +2017,7 @@ div.action-links,
text-overflow: ellipsis;
}

.wp-list-table .is-expanded th:not(.hidden),
.wp-list-table .is-expanded td:not(.hidden) {
display: block !important;
overflow: hidden; /* clearfix */
Expand Down Expand Up @@ -2231,7 +2283,7 @@ div.action-links,
}

/* Plugin/Theme Management */
#wpbody-content .wp-list-table.plugins td {
#wpbody-content .wp-list-table.plugins tbody td {
display: block;
width: auto;
padding: 10px 9px; /* reset from other list tables that have a label at this width */
Expand Down
Loading