Data views: Update search appearance in narrow containers (#64681)

Co-authored-by: jameskoster <[email protected]> Co-authored-by: youknowriad <[email protected]>
WordPress · Aug 21, 2024 · e6bc14c · e6bc14c
1 parent be2d49f
commit e6bc14c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 15 deletions.
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
@@ -12,6 +12,10 @@
 - Filters no longer display the elements' description. ([#64674](https://github.com/WordPress/gutenberg/pull/64674))
 
 
+## Enhancements
+
+-   Adjust layout of filter / actions row, increase width of search control when the container is narrower. ([#64681](https://github.com/WordPress/gutenberg/pull/64681)).
+
 ## 4.1.0 (2024-08-07)
 
 ## Internal

diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx
@@ -118,11 +118,15 @@ export default function DataViews< Item >( {
 			<div className="dataviews-wrapper">
 				<HStack
 					alignment="top"
-					justify="start"
+					justify="space-between"
 					className="dataviews__view-actions"
 					spacing={ 1 }
 				>
-					<HStack justify="start" wrap>
+					<HStack
+						justify="start"
+						expanded={ false }
+						className="dataviews__search"
+					>
 						{ search && <DataViewsSearch label={ searchLabel } /> }
 						<FilterVisibilityToggle
 							filters={ filters }
@@ -133,12 +137,12 @@ export default function DataViews< Item >( {
 							isShowingFilter={ isShowingFilter }
 						/>
 					</HStack>
-					<DataViewsBulkActions />
 					<HStack
 						spacing={ 1 }
 						expanded={ false }
 						style={ { flexShrink: 0 } }
 					>
+						<DataViewsBulkActions />
 						<DataViewsViewConfig
 							defaultLayouts={ defaultLayouts }
 							density={ density }

diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
@@ -18,12 +18,6 @@
 	left: 0;
 	transition: padding ease-out 0.1s;
 	@include reduce-motion("transition");
-
-	.components-search-control {
-		.components-base-control__field {
-			max-width: 240px;
-		}
-	}
 }
 
 .dataviews-view-list__primary-field,
@@ -82,12 +76,6 @@
 	.dataviews__view-actions,
 	.dataviews-filters__container {
 		padding: $grid-unit-15 $grid-unit-30;
-
-		.components-search-control {
-			.components-base-control__field {
-				max-width: 112px;
-			}
-		}
 	}
 
 	.dataviews-view-grid,