Changeset 62446

Timestamp:

06/02/2026 11:09:38 AM (8 weeks ago)

Author:

westonruter

Message:

Plugins: Fix plugin card width calculation on the Add Plugins screen.

Replace the obsolete float-based layout with the flex container's gap, and remove the now-unnecessary float, clear, and :nth-child margin overrides. This eliminates the slight width discrepancy that left a gap on the right edge.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/10596.
Follow-up to r29047, r29219.

Props abdalsalaam, sabernhardt, westonruter.
See #28785.
Fixes #64355.

File:

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

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

@@ -1475 +1475 @@
         display: flex;
         flex-wrap: wrap;
+        gap: 16px;
 }
 
@@ -1506 +1507 @@
 
 .plugin-card {
-        float: left;
-        margin: 0 8px 16px;
-        width: 48.5%;
         width: calc( 50% - 8px );
         background-color: #ffffff;
@@ -1517 +1515 @@
 }
 
-.plugin-card:nth-child(odd) {
-        clear: both;
-        margin-left: 0;
-}
-
-.plugin-card:nth-child(even) {
-        margin-right: 0;
-}
-
-@media screen and (min-width: 1600px) and ( max-width: 2299px ) {
+@media screen and (min-width: 1600px) {
         .plugin-card {
-                width: 30%;
-                width: calc( 33.1% - 8px );
-        }
-
-        .plugin-card:nth-child(odd) {
-                clear: none;
-                margin-left: 8px;
-        }
-
-        .plugin-card:nth-child(even) {
-                margin-right: 8px;
-        }
-
-        .plugin-card:nth-child(3n+1) {
-                clear: both;
-                margin-left: 0;
-        }
-
-        .plugin-card:nth-child(3n) {
-                margin-right: 0;
+                width: calc( (100% - 32px) / 3 );
         }
 }
@@ -1553 +1523 @@
 @media screen and (min-width: 2300px) {
         .plugin-card {
-                width: 25%;
-                width: calc( 25% - 12px );
-        }
-
-        .plugin-card:nth-child(odd) {
-                clear: none;
-                margin-left: 8px;
-        }
-
-        .plugin-card:nth-child(even) {
-                margin-right: 8px;
-        }
-
-        .plugin-card:nth-child(4n+1) {
-                clear: both;
-                margin-left: 0;
-        }
-
-        .plugin-card:nth-child(4n) {
-                margin-right: 0;
+                width: calc( (100% - 48px) / 4 );
         }
 }