From 8aecdaaec99980bf974399f6de9d18c7018522d8 Mon Sep 17 00:00:00 2001 From: Kelly Choyce-Dwan Date: Fri, 4 Jun 2021 18:13:52 +0000 Subject: [PATCH] List Tables: Update spacing in action items on small screens. Switch the display to flex. The action items use their intrinsic space, rather than a fixed grid, which prevents too much space between items on larger mobile screens. Props arunsathiya, sabernhardt, danfarrow, notlaura, aliveic, y_kolev Fixes #48546, #47895. git-svn-id: https://develop.svn.wordpress.org/trunk@51073 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/list-tables.css | 29 ++++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index 2006bded2b..2cb19dcd6c 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -1871,21 +1871,24 @@ div.action-links, padding-top: 10px; } - /* Make row actions more easy to select on mobile */ - body:not(.plugins-php) .row-actions { - display: grid; - grid-template-columns: auto auto auto; - color: transparent; + .row-actions { + margin-left: -8px; + margin-right: -8px; + padding-top: 4px; } - .row-actions span { - padding: 4px 0; + /* Make row actions more easy to select on mobile */ + body:not(.plugins-php) .row-actions { + display: flex; + flex-wrap: wrap; + gap: 8px; + color: transparent; } .row-actions span a, .row-actions span .button-link { display: inline-block; - padding: 4px 0; + padding: 4px 8px; line-height: 1.5; } @@ -2135,6 +2138,11 @@ div.action-links, margin-right: 0; width: 100%; } + + table.media .column-title .has-media-icon ~ .row-actions { + margin-left: 0; + clear: both; + } } @media screen and (max-width: 480px) { @@ -2142,11 +2150,6 @@ div.action-links, margin: 0; } - /* Drop row actions to two columns on a small screen */ - .row-actions:not(.plugins-php) { - grid-template-columns: auto auto; - } - .tablenav.bottom .displaying-num { position: relative; top: 0;