diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index a7197c4591..fe62d8dd20 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -1761,6 +1761,14 @@ p.customize-section-description {
 	z-index: 20;
 }
 
+@media screen and (min-width: 1670px) {
+	.control-panel-themes .customize-themes-full-container {
+		width: 82%;
+		right: 0;
+		left: initial;
+	}
+}
+
 .modal-open .control-panel-themes .customize-themes-full-container {
 	overflow-y: visible;
 }
@@ -1835,7 +1843,7 @@ p.customize-section-description {
 	display: none;
 }
 
-.themes-filter-bar .filter-drawer {
+.filter-drawer {
 	box-sizing: border-box;
 	width: 100%;
 	position: absolute;
@@ -1848,7 +1856,7 @@ p.customize-section-description {
 	border-bottom: 1px solid #ddd;
 }
 
-.themes-filter-bar .filter-group {
+.filter-drawer .filter-group {
 	margin: 0 25px 0 0;
 	width: calc( (100% - 75px) / 3);
 	min-width: 200px;
@@ -2122,6 +2130,14 @@ p.customize-section-description {
 	border-bottom: 1px solid #ddd;
 }
 
+@media screen and (min-width: 1670px) {
+	.customize-preview-header.themes-filter-bar {
+		width: 82%;
+		right: 0;
+		left: initial;
+	}
+}
+
 .themes-filter-bar .themes-filter-container {
 	margin: 0;
 	padding: 0;
@@ -2149,6 +2165,9 @@ p.customize-section-description {
 		width: 100%;
 		margin: 0 0 25px 0;
 	}
+	.filter-drawer {
+		top: 46px;
+	}
 	.wp-customizer .theme-browser .themes {
 		padding: 0 0 25px 25px;
 		overflow: hidden;
@@ -2163,7 +2182,7 @@ p.customize-section-description {
 }
 
 @media screen and (max-width:1018px) {
-	.themes-filter-bar .filter-group {
+	.filter-drawer .filter-group {
 		width: calc( (100% - 50px) / 2);
 	}
 }
@@ -2180,7 +2199,7 @@ p.customize-section-description {
 		min-width: 200px;
 	}
 
-	.themes-filter-bar .filter-drawer {
+	.filter-drawer {
 		top: 86px;
 	}
 
@@ -2190,7 +2209,7 @@ p.customize-section-description {
 }
 
 @media screen and (max-width:792px) {
-	.themes-filter-bar .filter-group {
+	.filter-drawer .filter-group {
 		width: calc( 100% - 25px);
 	}
 }
@@ -2202,6 +2221,10 @@ p.customize-section-description {
 /* Mobile - toggle between themes and filters */
 @media screen and (max-width:600px) {
 
+	.filter-drawer {
+		top: 132px;
+	}
+
 	.wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
 		display: block;
 		float: right;
diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index c2a63b068f..c5cdfe9334 100644
--- a/src/wp-admin/js/customize-controls.js
+++ b/src/wp-admin/js/customize-controls.js
@@ -1799,21 +1799,29 @@
 
 			// Toggle feature filters.
 			section.contentContainer.on( 'click', '.feature-filter-toggle', function( e ) {
-				$( e.currentTarget )
+				var $themeContainer = $( '.customize-themes-full-container' ),
+					$filterToggle = $( e.currentTarget );
+				section.filtersHeight = $filterToggle.parent().next( '.filter-drawer' ).height();
+
+				if ( 0 < $themeContainer.scrollTop() ) {
+					$themeContainer.animate( { scrollTop: 0 }, 400 );
+
+					if ( $filterToggle.hasClass( 'open' ) ) {
+						return;
+					}
+				}
+
+				$filterToggle
 					.toggleClass( 'open' )
 					.attr( 'aria-expanded', function( i, attr ) {
 						return 'true' === attr ? 'false' : 'true';
 					})
-					.next( '.filter-drawer' ).slideToggle( 180, 'linear', function() {
-						if ( 0 === section.filtersHeight ) {
-							section.filtersHeight = $( this ).height();
+					.parent().next( '.filter-drawer' ).slideToggle( 180, 'linear' );
 
-							// First time, so it's opened.
-							section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
-						}
-					});
-				if ( $( e.currentTarget ).hasClass( 'open' ) ) {
-					section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
+				if ( $filterToggle.hasClass( 'open' ) ) {
+					var marginOffset = 1018 < window.innerWidth ? 50 : 76;
+
+					section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + marginOffset );
 				} else {
 					section.contentContainer.find( '.themes' ).css( 'margin-top', 0 );
 				}
diff --git a/src/wp-includes/customize/class-wp-customize-themes-section.php b/src/wp-includes/customize/class-wp-customize-themes-section.php
index 947f5eb179..b89e6b55ea 100644
--- a/src/wp-includes/customize/class-wp-customize-themes-section.php
+++ b/src/wp-includes/customize/class-wp-customize-themes-section.php
@@ -80,6 +80,9 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
 					<div class="customize-preview-header themes-filter-bar">
 						<?php $this->filter_bar_content_template(); ?>
 					</div>
+					<# if ( 'wporg' === data.action ) { #>
+						<?php $this->filter_drawer_content_template(); ?>
+					<# } #>
 					<div class="error unexpected-error" style="display: none; "><p><?php _e( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server&#8217;s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' ); ?></p></div>
 					<ul class="themes">
 					</ul>
@@ -125,22 +128,6 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
 				?>
 				</span>
 			</button>
-			<div class="filter-drawer filter-details">
-				<?php
-				$feature_list = get_theme_feature_list( false ); // @todo: Use the .org API instead of the local core feature list. The .org API is currently outdated and will be reconciled when the .org themes directory is next redesigned.
-				foreach ( $feature_list as $feature_name => $features ) {
-					echo '<fieldset class="filter-group">';
-					echo '<legend>' . esc_html( $feature_name ) . '</legend>';
-					echo '<div class="filter-group-feature">';
-					foreach ( $features as $feature => $feature_name ) {
-						echo '<input type="checkbox" id="filter-id-' . esc_attr( $feature ) . '" value="' . esc_attr( $feature ) . '" /> ';
-						echo '<label for="filter-id-' . esc_attr( $feature ) . '">' . esc_html( $feature_name ) . '</label><br>';
-					}
-					echo '</div>';
-					echo '</fieldset>';
-				}
-				?>
-			</div>
 		<# } else { #>
 			<div class="themes-filter-container">
 				<label for="{{ data.id }}-themes-filter" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
@@ -159,4 +146,31 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
 		</div>
 		<?php
 	}
+
+	/**
+	 * Render the filter drawer portion of a themes section as a JS template.
+	 *
+	 * The template is only rendered by PHP once, so all actions are prepared at once on the server side.
+	 * The filter bar container is rendered by @see `render_template()`.
+	 *
+	 * @since 4.9.0
+	 */
+	protected function filter_drawer_content_template() {
+		$feature_list = get_theme_feature_list( false ); // @todo: Use the .org API instead of the local core feature list. The .org API is currently outdated and will be reconciled when the .org themes directory is next redesigned.
+		?>
+		<div class="filter-drawer filter-details">
+			<?php foreach ( $feature_list as $feature_name => $features ) : ?>
+				<fieldset class="filter-group">
+					<legend><?php echo esc_html( $feature_name ); ?></legend>
+					<div class="filter-group-feature">
+						<?php foreach ( $features as $feature => $feature_name ) : ?>
+							<input type="checkbox" id="filter-id-<?php echo esc_attr( $feature ); ?>" value="<?php echo esc_attr( $feature ); ?>" />
+							<label for="filter-id-<?php echo esc_attr( $feature ); ?>"><?php echo esc_html( $feature_name ); ?></label><br>
+						<?php endforeach; ?>
+					</div>
+				</fieldset>
+			<?php endforeach; ?>
+		</div>
+		<?php
+	}
 }