Changeset 51073

Timestamp:

06/04/2021 06:13:52 PM (5 years ago)

Author:

ryelle

Message:

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.

File:

• trunk/src/wp-admin/css/list-tables.css (modified) (4 diffs)

trunk/src/wp-admin/css/list-tables.css

@@ -1872 +1872 @@
         }
 
+        .row-actions {
+                margin-left: -8px;
+                margin-right: -8px;
+                padding-top: 4px;
+        }
+
         /* Make row actions more easy to select on mobile */
         body:not(.plugins-php) .row-actions {
-                display: grid;
-                grid-template-columns: auto auto auto;
+                display: flex;
+                flex-wrap: wrap;
+                gap: 8px;
                 color: transparent;
-        }
-
-        .row-actions span {
-                padding: 4px 0;
         }
 
@@ -1886 +1889 @@
         .row-actions span .button-link {
                 display: inline-block;
-                padding: 4px 0;
+                padding: 4px 8px;
                 line-height: 1.5;
         }
@@ -2136 +2139 @@
                 width: 100%;
         }
+
+        table.media .column-title .has-media-icon ~ .row-actions {
+                margin-left: 0;
+                clear: both;
+        }
 }
 
@@ -2141 +2149 @@
         .tablenav-pages .current-page {
                 margin: 0;
-        }
-
-        /* Drop row actions to two columns on a small screen */
-        .row-actions:not(.plugins-php) {
-                grid-template-columns: auto auto;
         }