From 00ff9fa8b52a7853aed2091b0f131702859afad0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <aljullu@gmail.com>
Date: Wed, 20 Feb 2019 20:44:12 +0100
Subject: [PATCH] Fix table search position in small viewports
 (https://github.com/woocommerce/woocommerce-admin/pull/1646)

---
 .../packages/components/src/search/index.js                | 1 +
 .../packages/components/src/search/style.scss              | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/plugins/woocommerce-admin/packages/components/src/search/index.js b/plugins/woocommerce-admin/packages/components/src/search/index.js
index 12427a04705..0d97d4eed2a 100644
--- a/plugins/woocommerce-admin/packages/components/src/search/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/search/index.js
@@ -197,6 +197,7 @@ class Search extends Component {
 							<div
 								className={ classnames( 'woocommerce-search__inline-container', {
 									'is-active': isActive,
+									'has-tags': inlineTags && shouldRenderTags,
 								} ) }
 								onClick={ () => {
 									this.input.current.focus();
diff --git a/plugins/woocommerce-admin/packages/components/src/search/style.scss b/plugins/woocommerce-admin/packages/components/src/search/style.scss
index 1dabb3db49a..5b21bd5aac6 100644
--- a/plugins/woocommerce-admin/packages/components/src/search/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/search/style.scss
@@ -38,7 +38,7 @@
 
 	.woocommerce-search__inline-container {
 		width: 100%;
-		padding: 4px 36px 4px;
+		padding: 4px 2px 4px 36px;
 		border: 1px solid $core-grey-light-700;
 		background-color: $white;
 		display: flex;
@@ -50,6 +50,10 @@
 			box-shadow: inset 0 0 0 $input-active-inner, 0 0 1px 2px $input-active-outer;
 		}
 
+		&.has-tags {
+			padding-right: 36px;
+		}
+
 		.woocommerce-search__token-list {
 			max-width: 100%;
 			display: inline-block;
@@ -64,6 +68,7 @@
 		box-shadow: none;
 		padding: 2px 0;
 		line-height: 20px;
+		max-width: 100%;
 		min-width: 70px;
 		font-size: inherit;
 		vertical-align: middle;