From c18a42b6e82a40968990bef02e6680cce297392e Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Wed, 21 Feb 2024 11:00:05 +0000
Subject: [PATCH] Update filter control position

---
 packages/dataviews/src/dataviews.js | 36 ++++++++++++++---------------
 packages/dataviews/src/filters.js   |  7 +++++-
 packages/dataviews/src/style.scss   |  8 +------
 3 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.js
index c7ae6b6e27aad..49143d0bb0753 100644
--- a/packages/dataviews/src/dataviews.js
+++ b/packages/dataviews/src/dataviews.js
@@ -79,17 +79,30 @@ export default function DataViews( {
 		<div className="dataviews-wrapper">
 			<VStack spacing={ 3 } justify="flex-start">
 				<HStack
-					alignment="flex-start"
+					alignment="top"
 					justify="start"
 					className="dataviews-filters__view-actions"
 				>
-					{ search && (
-						<Search
-							label={ searchLabel }
+					<HStack
+						justify="start"
+						className="dataviews-filters__container"
+						wrap
+					>
+						{ search && (
+							<Search
+								label={ searchLabel }
+								view={ view }
+								onChangeView={ onChangeView }
+							/>
+						) }
+						<Filters
+							fields={ _fields }
 							view={ view }
 							onChangeView={ onChangeView }
+							openedFilter={ openedFilter }
+							setOpenedFilter={ setOpenedFilter }
 						/>
-					) }
+					</HStack>
 					{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) && (
 						<BulkActions
 							actions={ actions }
@@ -106,19 +119,6 @@ export default function DataViews( {
 						supportedLayouts={ supportedLayouts }
 					/>
 				</HStack>
-				<HStack
-					justify="start"
-					className="dataviews-filters__container"
-					wrap
-				>
-					<Filters
-						fields={ _fields }
-						view={ view }
-						onChangeView={ onChangeView }
-						openedFilter={ openedFilter }
-						setOpenedFilter={ setOpenedFilter }
-					/>
-				</HStack>
 				<ViewComponent
 					fields={ _fields }
 					view={ view }
diff --git a/packages/dataviews/src/filters.js b/packages/dataviews/src/filters.js
index 80008fb6e569d..eb1bce3a42dc4 100644
--- a/packages/dataviews/src/filters.js
+++ b/packages/dataviews/src/filters.js
@@ -11,6 +11,7 @@ import AddFilter from './add-filter';
 import ResetFilters from './reset-filters';
 import { sanitizeOperators } from './utils';
 import { ENUMERATION_TYPE, OPERATOR_IN, OPERATOR_NOT_IN } from './constants';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 
 const Filters = memo( function Filters( {
 	fields,
@@ -108,7 +109,11 @@ const Filters = memo( function Filters( {
 		);
 	}
 
-	return filterComponents;
+	return (
+		<HStack justify="flex-start" style={ { width: 'fit-content' } } wrap>
+			{ filterComponents }
+		</HStack>
+	);
 } );
 
 export default Filters;
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index cd293b46d4a47..569913dc1ec7e 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -13,8 +13,6 @@
 .dataviews-filters__view-actions {
 	padding: $grid-unit-15 $grid-unit-40 0;
 	.components-search-control {
-		flex-grow: 1;
-
 		.components-base-control__field {
 			max-width: 240px;
 		}
@@ -22,11 +20,7 @@
 }
 
 .dataviews-filters__container {
-	padding: 0 $grid-unit-40;
-}
-
-.dataviews-filters__view-actions.components-h-stack {
-	align-items: center;
+	padding-right: $grid-unit-40;
 }
 
 .dataviews-filters-button {