Fix the search field width in the media modal, media library grid and on the install new plugins screen. Props helen, fixes #30658.

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


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

wp-admin/css/common-rtl.css

@@ -954,6 +954,10 @@ th.action-links {
 	margin-left: 20px;
 }
 
+.filter-items {
+	float: right;
+}
+
 .filter-links {
 	display: inline-block;
 	margin: 0;
@@ -988,23 +992,22 @@ th.action-links {
 }
 
 .wp-filter .search-form {
-	margin: 10px;
-	position: absolute;
-	left: 0;
-	top: 0;
+	float: left;
+	margin: 10px 0;
 }
 
 .wp-filter .search-form input[type="search"] {
 	margin: 0;
 	padding: 3px 5px;
-	max-width: 280px;
-	width: 100%;
+	width: 280px;
+	max-width: 100%;
 	font-size: 16px;
 	font-weight: 300;
 	line-height: 1.5;
 }
 
 .wp-filter .search-form select {
+	margin: 0;
 	height: 33px;
 	vertical-align: top;
 }
@@ -1205,11 +1208,17 @@ th.action-links {
 	}
 }
 
-@media only screen and (max-width: 910px) {
+@media only screen and (max-width: 1000px) {
+	.filter-items {
+		float: none;
+	}
+
+	.wp-filter .media-toolbar-primary,
+	.wp-filter .media-toolbar-secondary,
 	.wp-filter .search-form {
 		float: none; /* Remove float from media-views.css */
 		position: relative;
-		margin: 20px 0;
+		max-width: 100%;
 	}
 }
 

wp-admin/css/common.css

@@ -954,6 +954,10 @@ th.action-links {
 	margin-right: 20px;
 }
 
+.filter-items {
+	float: left;
+}
+
 .filter-links {
 	display: inline-block;
 	margin: 0;
@@ -988,23 +992,22 @@ th.action-links {
 }
 
 .wp-filter .search-form {
-	margin: 10px;
-	position: absolute;
-	right: 0;
-	top: 0;
+	float: right;
+	margin: 10px 0;
 }
 
 .wp-filter .search-form input[type="search"] {
 	margin: 0;
 	padding: 3px 5px;
-	max-width: 280px;
-	width: 100%;
+	width: 280px;
+	max-width: 100%;
 	font-size: 16px;
 	font-weight: 300;
 	line-height: 1.5;
 }
 
 .wp-filter .search-form select {
+	margin: 0;
 	height: 33px;
 	vertical-align: top;
 }
@@ -1205,11 +1208,17 @@ th.action-links {
 	}
 }
 
-@media only screen and (max-width: 910px) {
+@media only screen and (max-width: 1000px) {
+	.filter-items {
+		float: none;
+	}
+
+	.wp-filter .media-toolbar-primary,
+	.wp-filter .media-toolbar-secondary,
 	.wp-filter .search-form {
 		float: none; /* Remove float from media-views.css */
 		position: relative;
-		margin: 20px 0;
+		max-width: 100%;
 	}
 }
 

wp-admin/css/list-tables-rtl.css

@@ -630,7 +630,7 @@ classes exist in paginate_links() but not seen in list table output. */
 .wp-filter .view-switch {
 	display: inline-block;
 	vertical-align: middle;
-	padding: 14px 0;
+	padding: 15px 0;
 	margin: 0 0 0 20px;
 }
 

wp-admin/css/list-tables.css

@@ -630,7 +630,7 @@ classes exist in paginate_links() but not seen in list table output. */
 .wp-filter .view-switch {
 	display: inline-block;
 	vertical-align: middle;
-	padding: 14px 0;
+	padding: 15px 0;
 	margin: 0 20px 0 0;
 }
 

wp-admin/css/media-rtl.css

@@ -1126,10 +1126,6 @@ audio, video {
  */
 
 @media only screen and (max-width: 1120px) {
-	.media-frame.mode-grid .attachments-browser .media-toolbar-secondary {
-		float: none;
-	}
-
 	/* override for media-views.css */
 	#wp-media-grid .wp-filter .attachment-filters {
 		max-width: 100%;

wp-admin/css/media.css

@@ -1126,10 +1126,6 @@ audio, video {
  */
 
 @media only screen and (max-width: 1120px) {
-	.media-frame.mode-grid .attachments-browser .media-toolbar-secondary {
-		float: none;
-	}
-
 	/* override for media-views.css */
 	#wp-media-grid .wp-filter .attachment-filters {
 		max-width: 100%;

wp-admin/includes/class-wp-media-list-table.php

@@ -165,33 +165,35 @@ class WP_Media_List_Table extends WP_List_Table {
 		$views = $this->get_views();
 ?>
 <div class="wp-filter">
-	<?php $this->view_switcher( $mode ); ?>
+	<div class="filter-items">
+		<?php $this->view_switcher( $mode ); ?>
 
-	<select class="attachment-filters" name="attachment-filter">
-		<?php
-		if ( ! empty( $views ) ) {
-			foreach ( $views as $class => $view ) {
-				echo "\t$view\n";
+		<select class="attachment-filters" name="attachment-filter">
+			<?php
+			if ( ! empty( $views ) ) {
+				foreach ( $views as $class => $view ) {
+					echo "\t$view\n";
+				}
 			}
-		}
-		?>
-	</select>
+			?>
+		</select>
 
 <?php
-	$this->extra_tablenav( 'bar' );
+		$this->extra_tablenav( 'bar' );
 
-	/** This filter is documented in wp-admin/inclues/class-wp-list-table.php */
-	$views = apply_filters( "views_{$this->screen->id}", array() );
+		/** This filter is documented in wp-admin/inclues/class-wp-list-table.php */
+		$views = apply_filters( "views_{$this->screen->id}", array() );
 
-	// Back compat for pre-4.0 view links.
-	if ( ! empty( $views ) ) {
-		echo '<ul class="filter-links">';
-		foreach ( $views as $class => $view ) {
-			echo "<li class='$class'>$view</li>";
+		// Back compat for pre-4.0 view links.
+		if ( ! empty( $views ) ) {
+			echo '<ul class="filter-links">';
+			foreach ( $views as $class => $view ) {
+				echo "<li class='$class'>$view</li>";
+			}
+			echo '</ul>';
 		}
-		echo '</ul>';
-	}
 ?>
+	</div>
 
 	<div class="search-form">
 		<label for="media-search-input" class="screen-reader-text"><?php esc_html_e( 'Search Media' ); ?></label>

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

@@ -231,11 +231,13 @@
 .media-toolbar-primary {
 	float: left;
 	height: 100%;
+	max-width: 33%;
 }
 
 .media-toolbar-secondary {
 	float: right;
 	height: 100%;
+	max-width: 66%;
 }
 
 .media-toolbar-primary > .media-button,
@@ -731,7 +733,8 @@
  */
 .media-frame select.attachment-filters {
 	margin-top: 11px;
-	margin-left: 10px;
+	margin-left: 2%;
+	max-width: 47%;
 }
 
 /**
@@ -746,8 +749,8 @@
 	-webkit-appearance: none;
 }
 
-.media-toolbar-secondary .search {
-	margin-left: 16px;
+.media-toolbar-primary .search {
+	max-width: 100%;
 }
 
 /**
@@ -2147,12 +2150,6 @@
 	font-family: Arial, sans-serif;
 }
 
-@media only screen and (max-width: 940px) {
-	.media-frame-content .media-toolbar-secondary .attachment-filters {
-		max-width: 134px;
-	}
-}
-
 /**
  * Responsive layout
  */
@@ -2346,11 +2343,6 @@
 		display: none;
 	}
 
-	.media-modal .attachments-browser .media-toolbar-primary,
-	.media-modal .attachments-browser .media-toolbar-secondary {
-		width: 50%;
-	}
-
 	.media-modal .attachments-browser .media-toolbar .search {
 		max-width: 100%;
 		height: auto;
@@ -2358,11 +2350,7 @@
 	}
 
 	.media-modal .attachments-browser .media-toolbar .attachment-filters {
-		margin: 11px 0 0;
 		height: auto;
-		max-width: 65%;
-		max-width: -webkit-calc(100% - 38px);
-		max-width: calc(100% - 38px);
 	}
 
 	.media-modal .attachments-browser .media-toolbar .spinner {
@@ -2466,10 +2454,6 @@
 }
 
 @media only screen and (max-width: 480px) {
-	.media-frame-content .media-toolbar .attachment-filters {
-		max-width: 90px;
-	}
-
 	.media-modal-close {
 		top: 5px;
 		left: 5px;

wp-includes/css/media-views.css

@@ -231,11 +231,13 @@
 .media-toolbar-primary {
 	float: right;
 	height: 100%;
+	max-width: 33%;
 }
 
 .media-toolbar-secondary {
 	float: left;
 	height: 100%;
+	max-width: 66%;
 }
 
 .media-toolbar-primary > .media-button,
@@ -731,7 +733,8 @@
  */
 .media-frame select.attachment-filters {
 	margin-top: 11px;
-	margin-right: 10px;
+	margin-right: 2%;
+	max-width: 47%;
 }
 
 /**
@@ -746,8 +749,8 @@
 	-webkit-appearance: none;
 }
 
-.media-toolbar-secondary .search {
-	margin-right: 16px;
+.media-toolbar-primary .search {
+	max-width: 100%;
 }
 
 /**
@@ -2147,12 +2150,6 @@
 	font-family: Arial, sans-serif;
 }
 
-@media only screen and (max-width: 940px) {
-	.media-frame-content .media-toolbar-secondary .attachment-filters {
-		max-width: 134px;
-	}
-}
-
 /**
  * Responsive layout
  */
@@ -2346,11 +2343,6 @@
 		display: none;
 	}
 
-	.media-modal .attachments-browser .media-toolbar-primary,
-	.media-modal .attachments-browser .media-toolbar-secondary {
-		width: 50%;
-	}
-
 	.media-modal .attachments-browser .media-toolbar .search {
 		max-width: 100%;
 		height: auto;
@@ -2358,11 +2350,7 @@
 	}
 
 	.media-modal .attachments-browser .media-toolbar .attachment-filters {
-		margin: 11px 0 0;
 		height: auto;
-		max-width: 65%;
-		max-width: -webkit-calc(100% - 38px);
-		max-width: calc(100% - 38px);
 	}
 
 	.media-modal .attachments-browser .media-toolbar .spinner {
@@ -2466,10 +2454,6 @@
 }
 
 @media only screen and (max-width: 480px) {
-	.media-frame-content .media-toolbar .attachment-filters {
-		max-width: 90px;
-	}
-
 	.media-modal-close {
 		top: 5px;
 		right: 5px;