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

@@ -1871,21 +1871,24 @@ div.action-links,
 		padding-top: 10px;
 	}
 
+	.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;
-	}
-
 	.row-actions span a,
 	.row-actions span .button-link {
 		display: inline-block;
-		padding: 4px 0;
+		padding: 4px 8px;
 		line-height: 1.5;
 	}
 
@@ -2135,18 +2138,18 @@ 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) {
 	.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;
-	}
-
 	.tablenav.bottom .displaying-num {
 		position: relative;
 		top: 0;