From 6b81c17cb77ee1bd5fd672a689a1fec85b497161 Mon Sep 17 00:00:00 2001
From: Sergey Biryukov <sergeybiryukov@git.wordpress.org>
Date: Sun, 15 Sep 2024 13:47:36 +0000
Subject: [PATCH] Themes: Improve the alignment of feature filters and inputs
 on Add Themes screen.

Follow-up to [35527], [38640], [40797].

Props Benjamin_Zekavica, sabernhardt, sumitsingh, gauravtiwari, krupajnanda, audrasjb, SergeyBiryukov.
Fixes #53314.

git-svn-id: https://develop.svn.wordpress.org/trunk@59022 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css    | 22 +++++++++++++++++++---
 src/wp-admin/theme-install.php |  2 +-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 17d9493161386..287f2ee7b4958 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -1180,6 +1180,17 @@ th.action-links {
 	overflow: hidden;
 }
 
+.wp-filter .favorites-form .favorites-username {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+}
+
+.wp-filter .favorites-form .favorites-username input {
+	margin: 0;
+}
+
 .show-filters .filter-drawer,
 .show-favorites-form .favorites-form {
 	display: block;
@@ -1288,11 +1299,13 @@ th.action-links {
 }
 
 .filtered-by .tags {
-	display: inline;
+	display: flex;
+	align-items: flex-start;
+	flex-wrap: wrap;
+	gap: 8px;
 }
 
 .filtered-by .tag {
-	margin: 0 5px;
 	padding: 4px 8px;
 	border: 1px solid #dcdcde;
 	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
@@ -1307,7 +1320,10 @@ th.action-links {
 }
 
 .filters-applied .filtered-by {
-	display: block;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 10px;
 }
 
 .filters-applied .filter-drawer {
diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php
index 1cebf3405f117..bfd962d4fdb1c 100644
--- a/src/wp-admin/theme-install.php
+++ b/src/wp-admin/theme-install.php
@@ -230,7 +230,7 @@
 			?>
 			<p class="install-help"><?php _e( 'If you have marked themes as favorites on WordPress.org, you can browse them here.' ); ?></p>
 
-			<p>
+			<p class="favorites-username">
 				<label for="wporg-username-input"><?php _e( 'Your WordPress.org username:' ); ?></label>
 				<input type="hidden" id="wporg-username-nonce" name="_wpnonce" value="<?php echo esc_attr( wp_create_nonce( $action ) ); ?>" />
 				<input type="search" id="wporg-username-input" value="<?php echo esc_attr( $user ); ?>" />