DataViews: Fix primary field misalignment in grid layout (#66995)

Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
WordPress · Nov 15, 2024 · 02f67b8 · 02f67b8 · github-actions · Nov 15, 2024
1 parent 2e4b8d8
commit 02f67b8
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -114,11 +114,9 @@ function GridItem< Item >( {
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
 			>
-				<HStack>
-					<div { ...clickablePrimaryItemProps }>
-						{ renderedPrimaryField }
-					</div>
-				</HStack>
+				<div { ...clickablePrimaryItemProps }>
+					{ renderedPrimaryField }
+				</div>
 				<ItemActions item={ item } actions={ actions } isCompact />
 			</HStack>
 			{ !! badgeFields?.length && (

diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -17,6 +17,8 @@
 
 		.dataviews-view-grid__primary-field {
 			min-height: $grid-unit-40; // Preserve layout when there is no ellipsis button
+			display: flex;
+			align-items: center;
 
 			&--clickable {
 				width: fit-content;