Administration: Fix visual regression in media search input.

Follow up to [r56023]. Improve handling of breakpoint between 782 and 1000px for media grid view & repair styles for media modal search input.

Props kebbet, joedolson.
Fixes #57949.
Built from https://develop.svn.wordpress.org/trunk@56026


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

wp-admin/css/media-rtl.css

@@ -584,6 +584,16 @@ border color while dragging a file over the uploader drop area */
 	margin-top: 0;
 }
 
+.media-frame-content .media-search-input-label {
+	margin: 0 0 0 .2em;
+	vertical-align: baseline;
+}
+
+.media-frame.mode-grid .media-search-input-label {
+	position: static;
+	margin: 0 0 0 .5em;
+}
+
 .attachments-browser .media-toolbar-secondary > .media-button {
 	margin-left: 10px;
 }
@@ -1335,7 +1345,6 @@ audio, video {
 /**
  * Media queries for media grid.
  */
-
 @media only screen and (max-width: 1120px) {
 	/* override for media-views.css */
 	#wp-media-grid .wp-filter .attachment-filters {
@@ -1343,6 +1352,17 @@ audio, video {
 	}
 }
 
+@media only screen and (max-width: 1000px) {
+	/* override for forms.css */
+	.wp-filter p.search-box {
+		float: none;
+		width: 100%;
+		margin-bottom: 20px;
+		display: flex;
+	}
+
+}
+
 @media only screen and (max-width: 782px) {
 	.media-frame.mode-select .attachments-browser.fixed .media-toolbar {
 		top: 46px;

wp-admin/css/media.css

@@ -583,6 +583,16 @@ border color while dragging a file over the uploader drop area */
 	margin-top: 0;
 }
 
+.media-frame-content .media-search-input-label {
+	margin: 0 .2em 0 0;
+	vertical-align: baseline;
+}
+
+.media-frame.mode-grid .media-search-input-label {
+	position: static;
+	margin: 0 .5em 0 0;
+}
+
 .attachments-browser .media-toolbar-secondary > .media-button {
 	margin-right: 10px;
 }
@@ -1334,7 +1344,6 @@ audio, video {
 /**
  * Media queries for media grid.
  */
-
 @media only screen and (max-width: 1120px) {
 	/* override for media-views.css */
 	#wp-media-grid .wp-filter .attachment-filters {
@@ -1342,6 +1351,17 @@ audio, video {
 	}
 }
 
+@media only screen and (max-width: 1000px) {
+	/* override for forms.css */
+	.wp-filter p.search-box {
+		float: none;
+		width: 100%;
+		margin-bottom: 20px;
+		display: flex;
+	}
+
+}
+
 @media only screen and (max-width: 782px) {
 	.media-frame.mode-select .attachments-browser.fixed .media-toolbar {
 		top: 46px;

wp-includes/css/media-views-rtl.css

@@ -282,10 +282,6 @@
 	width: calc(48% - 12px);
 }
 
-.media-modal-content .attachments-browser .search {
-	width: 100%;
-}
-
 /* higher specificity */
 .wp-core-ui .media-modal-icon {
 	background-image: url(../images/uploader-icons.png);
@@ -925,6 +921,14 @@
 	max-width: 100%;
 }
 
+.media-modal .media-frame .media-search-input-label {
+	position: absolute;
+	right: 0;
+	top: 10px;
+	margin: 0;
+	line-height: 1;
+}
+
 /**
  * Attachments
  */

wp-includes/css/media-views.css

@@ -281,10 +281,6 @@
 	width: calc(48% - 12px);
 }
 
-.media-modal-content .attachments-browser .search {
-	width: 100%;
-}
-
 /* higher specificity */
 .wp-core-ui .media-modal-icon {
 	background-image: url(../images/uploader-icons.png);
@@ -924,6 +920,14 @@
 	max-width: 100%;
 }
 
+.media-modal .media-frame .media-search-input-label {
+	position: absolute;
+	left: 0;
+	top: 10px;
+	margin: 0;
+	line-height: 1;
+}
+
 /**
  * Attachments
  */

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.3-alpha-56025';
+$wp_version = '6.3-alpha-56026';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.