Make WordPress Core

Changeset 51073


Ignore:
Timestamp:
06/04/2021 06:13:52 PM (3 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/list-tables.css

    r50784 r51073  
    18721872    }
    18731873
     1874    .row-actions {
     1875        margin-left: -8px;
     1876        margin-right: -8px;
     1877        padding-top: 4px;
     1878    }
     1879
    18741880    /* Make row actions more easy to select on mobile */
    18751881    body:not(.plugins-php) .row-actions {
    1876         display: grid;
    1877         grid-template-columns: auto auto auto;
     1882        display: flex;
     1883        flex-wrap: wrap;
     1884        gap: 8px;
    18781885        color: transparent;
    1879     }
    1880 
    1881     .row-actions span {
    1882         padding: 4px 0;
    18831886    }
    18841887
     
    18861889    .row-actions span .button-link {
    18871890        display: inline-block;
    1888         padding: 4px 0;
     1891        padding: 4px 8px;
    18891892        line-height: 1.5;
    18901893    }
     
    21362139        width: 100%;
    21372140    }
     2141
     2142    table.media .column-title .has-media-icon ~ .row-actions {
     2143        margin-left: 0;
     2144        clear: both;
     2145    }
    21382146}
    21392147
     
    21412149    .tablenav-pages .current-page {
    21422150        margin: 0;
    2143     }
    2144 
    2145     /* Drop row actions to two columns on a small screen */
    2146     .row-actions:not(.plugins-php) {
    2147         grid-template-columns: auto auto;
    21482151    }
    21492152
Note: See TracChangeset for help on using the changeset viewer.