Ticket #30658: 30658.3.diff

src/wp-admin/css/common.css

@@ -954 +954 @@
         margin-right: 20px;
 }
 
+.filter-items {
+        float: left;
+}
+
 .filter-links {
         display: inline-block;
         margin: 0;
@@ -988 +992 @@
 }
 
 .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;
@@ -1005 +1007 @@
 }
 
 .wp-filter .search-form select {
+        margin: 0;
         height: 33px;
         vertical-align: top;
 }
@@ -1205 +1208 @@
         }
 }
 
-@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%;
         }
 }
 

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

@@ -630 +630 @@
 .wp-filter .view-switch {
         display: inline-block;
         vertical-align: middle;
-        padding: 14px 0;
+        padding: 15px 0;
         margin: 0 20px 0 0;
 }
 

src/wp-admin/css/media.css

@@ -1126 +1126 @@
  */
 
 @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%;

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

@@ -165 +165 @@
                 $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>

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

@@ -231 +231 @@
 .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 +733 @@
  */
 .media-frame select.attachment-filters {
         margin-top: 11px;
-        margin-right: 10px;
+        margin-right: 2%;
+        max-width: 47%;
 }
 
 /**
@@ -746 +749 @@
         -webkit-appearance: none;
 }
 
-.media-toolbar-secondary .search {
-        margin-right: 16px;
+.media-toolbar-primary .search {
+        max-width: 100%;
 }
 
 /**
@@ -2147 +2150 @@
         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 +2343 @@
                 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 +2350 @@
         }
 
         .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 +2454 @@
 }
 
 @media only screen and (max-width: 480px) {
-        .media-frame-content .media-toolbar .attachment-filters {
-                max-width: 90px;
-        }
-
         .media-modal-close {
                 top: 5px;
                 right: 5px;