Ticket #42212: 42212.3.diff

src/wp-admin/css/customize-controls.css

@@ -550 +550 @@
 }
 
 #customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title {
-        color: #555;
+        color: #555d66;
         background-color: #fff;
         border-left: 4px solid #fff;
 }
@@ -2147 +2147 @@
         margin: 1px 0;
 }
 
-/* Unstick the filter bar on short windows/screens. This breakpoint is based on the
-   current length of .org feature filters assuming translations do not wrap lines. */
-@media screen and (max-height:540px), screen and (max-width:1018px) {
-        .customize-preview-header.themes-filter-bar {
-                position: relative;
-                left: 0;
-                width: 100%;
-                margin: 0 0 25px 0;
-        }
-        .filter-drawer {
-                top: 46px;
-        }
-        .wp-customizer .theme-browser .themes {
-                padding: 0 0 25px 25px;
-                overflow: hidden;
-        }
-
-        .control-panel-themes .customize-themes-full-container {
-                margin-top: 0;
-                padding: 0;
-                height: 100%;
-                width: calc(100% - 300px);
-        }
-}
-
 @media screen and (max-width:1018px) {
         .filter-drawer .filter-group {
                 width: calc( (100% - 50px) / 2);
@@ -2197 +2172 @@
         .control-panel-themes .filter-themes-count {
                 float: left;
         }
+        
+        .wp-customizer .theme-browser .themes {
+                margin-top: 39px;
+        }
 }
 
 @media screen and (max-width:792px) {
@@ -2212 +2191 @@
 /* Mobile - toggle between themes and filters */
 @media screen and (max-width:600px) {
 
+        .customize-preview-header.themes-filter-bar {
+                width: 100%;
+                left: 0;
+                top: 46px;
+        }
+
+        .wp-customizer .theme-browser .themes {
+                margin-top: 111px;
+        }
+
         .filter-drawer {
                 top: 132px;
         }

src/wp-admin/js/customize-controls.js

@@ -1901 +1902 @@
                                         .parent().next( '.filter-drawer' ).slideToggle( 180, 'linear' );
 
                                 if ( $filterToggle.hasClass( 'open' ) ) {
-                                        var marginOffset = 1018 < window.innerWidth ? 50 : 76;
+                                        var marginOffset = 1018 < window.innerWidth ? 50 : 111;
 
                                         section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + marginOffset );
                                 } else {
-                                        section.contentContainer.find( '.themes' ).css( 'margin-top', 0 );
+                                        section.contentContainer.find( '.themes' ).css( 'margin-top', ( 600 < window.innerWidth ? 0 : 111 ) );
                                 }
                         });