Media: Improve upload page media item layout on smaller screens.

This allows smaller screens to wrap error messages and other uploader media item elements in a more readable way.

Props joedolson sabernhardt, Presskopp.
See #51754.


Built from https://develop.svn.wordpress.org/trunk@51195


git-svn-id: http://core.svn.wordpress.org/trunk@50804 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/media-rtl.css

@@ -113,9 +113,9 @@
 	margin-left: 10px;
 }
 
-.media-item {
+.media-item-wrapper {
 	display: grid;
-	grid-template-columns: repeat( 2, 1fr );
+	grid-template-columns: 1fr 1fr;
 }
 
 .media-item .attachment-tools {
@@ -254,6 +254,7 @@
 
 .media-upload-form .media-item .error {
 	padding: 10px 14px 10px 0;
+	min-height: 50px;
 }
 
 .media-item .error-div button.dismiss {
@@ -1288,6 +1289,12 @@ audio, video {
 	}
 }
 
+@media only screen and (max-width: 600px) {
+	.media-item-wrapper {
+		grid-template-columns: 1fr;
+	}
+}
+
 /**
  * Media queries for media grid.
  */

wp-admin/css/media.css

@@ -112,9 +112,9 @@
 	margin-right: 10px;
 }
 
-.media-item {
+.media-item-wrapper {
 	display: grid;
-	grid-template-columns: repeat( 2, 1fr );
+	grid-template-columns: 1fr 1fr;
 }
 
 .media-item .attachment-tools {
@@ -253,6 +253,7 @@
 
 .media-upload-form .media-item .error {
 	padding: 10px 0 10px 14px;
+	min-height: 50px;
 }
 
 .media-item .error-div button.dismiss {
@@ -1287,6 +1288,12 @@ audio, video {
 	}
 }
 
+@media only screen and (max-width: 600px) {
+	.media-item-wrapper {
+		grid-template-columns: 1fr;
+	}
+}
+
 /**
  * Media queries for media grid.
  */