Allow Search box to break into several lines (https://github.com/woocommerce/woocommerce-admin/pull/1196)

plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss

@@ -94,7 +94,6 @@
 
 	display: flex;
 	align-items: center;
-	white-space: nowrap;
 
 	@include breakpoint( '<782px' ) {
 		display: block;
@@ -108,6 +107,11 @@
 			display: block;
 		}
 	}
+
+	.woocommerce-tag {
+		margin-top: 1px;
+		margin-bottom: 1px;
+	}
 }
 
 .woocommerce-filters-advanced__rule {

plugins/woocommerce-admin/packages/components/src/search/index.js

@@ -3,7 +3,7 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Component, createRef } from '@wordpress/element';
+import { Component, createRef, Fragment } from '@wordpress/element';
 import { withInstanceId } from '@wordpress/compose';
 import { findIndex, noop } from 'lodash';
 import Gridicon from 'gridicons';
@@ -114,7 +114,7 @@ class Search extends Component {
 		const { selected } = this.props;
 
 		return this.shouldRenderTags() ? (
-			<div className="woocommerce-search__token-list">
+			<Fragment>
 				{ selected.map( ( item, i ) => {
 					if ( ! item.label ) {
 						return null;
@@ -135,7 +135,7 @@ class Search extends Component {
 						/>
 					);
 				} ) }
-			</div>
+			</Fragment>
 		) : null;
 	}
 
@@ -182,30 +182,32 @@ class Search extends Component {
 									this.input.current.focus();
 								} }
 							>
-								{ this.renderTags() }
-								<input
-									ref={ this.input }
-									type="text"
-									size={
-										( ( value.length === 0 && placeholder && placeholder.length ) ||
-											value.length ) + 1
-									}
-									value={ value }
-									placeholder={ ( ! shouldRenderTags && placeholder ) || '' }
-									className="woocommerce-search__inline-input"
-									onChange={ this.updateSearch( onChange ) }
-									aria-owns={ listBoxId }
-									aria-activedescendant={ activeId }
-									onFocus={ this.onFocus }
-									onBlur={ this.onBlur }
-									aria-describedby={
-										shouldRenderTags ? `search-inline-input-${ instanceId }` : null
-									}
-									{ ...aria }
-								/>
-								<span id={ `search-inline-input-${ instanceId }` } className="screen-reader-text">
-									{ __( 'Move backward for selected items' ) }
-								</span>
+								<div className="woocommerce-search__token-list">
+									{ this.renderTags() }
+									<input
+										ref={ this.input }
+										type="text"
+										size={
+											( ( value.length === 0 && placeholder && placeholder.length ) ||
+												value.length ) + 1
+										}
+										value={ value }
+										placeholder={ ( ! shouldRenderTags && placeholder ) || '' }
+										className="woocommerce-search__inline-input"
+										onChange={ this.updateSearch( onChange ) }
+										aria-owns={ listBoxId }
+										aria-activedescendant={ activeId }
+										onFocus={ this.onFocus }
+										onBlur={ this.onBlur }
+										aria-describedby={
+											shouldRenderTags ? `search-inline-input-${ instanceId }` : null
+										}
+										{ ...aria }
+									/>
+									<span id={ `search-inline-input-${ instanceId }` } className="screen-reader-text">
+										{ __( 'Move backward for selected items' ) }
+									</span>
+								</div>
 							</div>
 						) : (
 							<input

plugins/woocommerce-admin/packages/components/src/search/style.scss

@@ -5,14 +5,15 @@
 
 	.woocommerce-search__icon {
 		position: absolute;
-		top: 10px;
+		top: 50%;
 		left: 10px;
 		fill: $core-grey-light-900;
+		transform: translateY(-50%);
 	}
 
 	.woocommerce-search__inline-container {
 		width: 100%;
-		padding: 2px 2px 2px 36px;
+		padding: 4px 2px 4px 36px;
 		border: 1px solid $core-grey-light-700;
 		background-color: $white;
 		display: flex;
@@ -25,6 +26,7 @@
 
 		.woocommerce-search__token-list {
 			display: inline-block;
+			padding: 1px 0;
 		}
 	}
 
@@ -33,7 +35,11 @@
 		border: none;
 		outline: none;
 		box-shadow: none;
-		padding: 6px 0;
+		padding: 2px 0;
+		line-height: 20px;
+		min-width: 70px;
+		font-size: inherit;
+		vertical-align: middle;
 	}
 
 	.woocommerce-search__input {
@@ -48,7 +54,6 @@
 		align-items: stretch;
 		border: 1px solid $core-grey-light-700;
 		position: absolute;
-		top: 36px;
 		left: 0;
 		right: 0;
 		z-index: 10;