From 0ef2dc27f466052564c9bd494f58f3c0a0eca32c Mon Sep 17 00:00:00 2001
From: Joshua T Flowers <joshuatf@gmail.com>
Date: Wed, 20 Feb 2019 09:40:21 +0800
Subject: [PATCH] Fix long search tags
 (https://github.com/woocommerce/woocommerce-admin/pull/1597)

* Fix long search tags

* Remove spaces from css calc expression

Co-Authored-By: joshuatf <joshuatf@gmail.com>

* Fix overflowing autocomplete search
---
 .../packages/components/src/search/style.scss    | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/plugins/woocommerce-admin/packages/components/src/search/style.scss b/plugins/woocommerce-admin/packages/components/src/search/style.scss
index c7fce0f2bd6..1dabb3db49a 100644
--- a/plugins/woocommerce-admin/packages/components/src/search/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/search/style.scss
@@ -2,6 +2,11 @@
 
 .woocommerce-search {
 	position: relative;
+	min-width: 0;
+
+	>div {
+		min-width: 0;
+	}
 
 	.woocommerce-search__icon {
 		position: absolute;
@@ -10,6 +15,14 @@
 		fill: $core-grey-light-900;
 	}
 
+	.woocommerce-tag {
+		max-width: 100%;
+	}
+
+	.woocommerce-tag .woocommerce-tag__text {
+		max-width: calc(100% - 24px);
+	}
+
 	&:not(.has-inline-tags) {
 		.woocommerce-tag {
 			margin: 8px 6px 0 0;
@@ -25,7 +38,7 @@
 
 	.woocommerce-search__inline-container {
 		width: 100%;
-		padding: 4px 2px 4px 36px;
+		padding: 4px 36px 4px;
 		border: 1px solid $core-grey-light-700;
 		background-color: $white;
 		display: flex;
@@ -38,6 +51,7 @@
 		}
 
 		.woocommerce-search__token-list {
+			max-width: 100%;
 			display: inline-block;
 			padding: 1px 0;
 		}