Update grid view design for grid view

WordPress · Sep 25, 2024 · 1dd9af3 · 1dd9af3
1 parent 456e1c2
commit 1dd9af3
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 3 deletions.
diff --git a/packages/dataviews/src/components/dataviews-item-actions/index.tsx b/packages/dataviews/src/components/dataviews-item-actions/index.tsx
@@ -248,7 +248,7 @@ function CompactItemActions< Item >( {
 		<DropdownMenuV2
 			trigger={
 				<Button
-					size="compact"
+					size="small"
 					icon={ moreVertical }
 					label={ __( 'Actions' ) }
 					accessibleWhenDisabled

diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -95,8 +95,12 @@ function GridItem< Item >( {
 			<HStack
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
+				alignment="top"
 			>
-				<HStack className="dataviews-view-grid__primary-field">
+				<HStack
+					className="dataviews-view-grid__primary-field"
+					alignment="top"
+				>
 					{ renderedPrimaryField }
 				</HStack>
 				<ItemActions item={ item } actions={ actions } isCompact />

diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -16,7 +16,7 @@
 		}
 
 		.dataviews-view-grid__primary-field {
-			min-height: $grid-unit-40; // Preserve layout when there is no ellipsis button
+			min-height: $grid-unit-30; // Preserve layout when there is no ellipsis button
 		}
 
 		&.is-selected {

diff --git a/packages/dataviews/src/dataviews-layouts/table/style.scss b/packages/dataviews/src/dataviews-layouts/table/style.scss
@@ -162,6 +162,7 @@
 
 	.dataviews-view-table__actions-column {
 		width: 1%;
+		vertical-align: middle;
 	}
 
 	&:has(tr.is-selected) {

diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
@@ -110,6 +110,12 @@
 		-webkit-line-clamp: 2;
 		-webkit-box-orient: vertical;
 		white-space: normal;
+		padding-top: 3px;
+		align-self: start;
+	}
+
+	.edit-site-patterns__pattern-lock-icon {
+		align-self: start;
 	}
 }