From 419a7fc5b197960a4a580418eef3eac295a6d4ff Mon Sep 17 00:00:00 2001
From: Jeff Stieler <jeff.m.stieler@gmail.com>
Date: Wed, 26 May 2021 15:53:45 -0400
Subject: [PATCH] Fix advanced filter operator selector styling.
 (https://github.com/woocommerce/woocommerce-admin/pull/7005)

* Fix advanced filter operator selector styling.

* Add changelog entries.
---
 .../packages/components/CHANGELOG.md          |  1 +
 .../src/advanced-filters/style.scss           | 27 ++++++++++++-------
 plugins/woocommerce-admin/readme.txt          |  1 +
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md
index 9537237837b..b9f027982c8 100644
--- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md
+++ b/plugins/woocommerce-admin/packages/components/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Unreleased
 
 -   Fix style regression with the Chart header. #7002
+-   Fix styling of the advanced filter operator selection. #7005
 -   Remove the use of Dashicons and replace with @wordpress/icons or gridicons #7020
 -   Add tree shaking support to this package. #7034
 
diff --git a/plugins/woocommerce-admin/packages/components/src/advanced-filters/style.scss b/plugins/woocommerce-admin/packages/components/src/advanced-filters/style.scss
index 4aadeb7b900..f0751012a50 100644
--- a/plugins/woocommerce-admin/packages/components/src/advanced-filters/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/advanced-filters/style.scss
@@ -10,16 +10,25 @@
 		}
 	}
 
-	.components-select-control__input {
-		height: 38px;
-		padding: 0 0 0 $gap-smaller;
-		margin: 0;
+	.components-select-control {
+		.components-input-control__container {
+			.components-select-control__input {
+				height: 38px;
+				padding: 0 0 0 $gap-smaller;
+				margin: 0;
+			}
+		}
 	}
 
 	.components-card__header {
 		.components-base-control__field {
 			margin-bottom: 0;
 		}
+
+		p {
+			display: flex;
+			line-height: 38px;
+		}
 	}
 
 	@include breakpoint( '<782px' ) {
@@ -29,12 +38,12 @@
 	@include breakpoint( '<400px' ) {
 		margin: $gap-small 0;
 	}
-}
 
-.woocommerce-filters-advanced__title-select {
-	width: 70px;
-	display: inline-block;
-	margin: 0 $gap-smaller;
+	.woocommerce-filters-advanced__title-select {
+		width: 70px;
+		display: inline-block;
+		margin: 0 $gap-smaller;
+	}
 }
 
 .woocommerce-filters-advanced__list {
diff --git a/plugins/woocommerce-admin/readme.txt b/plugins/woocommerce-admin/readme.txt
index 77008d266b7..a59c7d666a6 100644
--- a/plugins/woocommerce-admin/readme.txt
+++ b/plugins/woocommerce-admin/readme.txt
@@ -119,6 +119,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 - Fix: Call existing filters for leaderboards in analytics. #6626
 - Fix: Set target to blank for the external links #6999
 - Fix style regression with the Chart header. #7002
+- Fix styling of the advanced filter operator selection. #7005
 - Fix: Deprecated warnings from select control @wordpress/data-controls. #7007
 - Tweak: Only fetch remote payment gateway recommendations when opted in #6964
 - Tweak: Setup checklist copy revert. #7015