DataViews grid layout: Fix long pattern names display

packages/dataviews/src/dataviews-layouts/grid/index.tsx

@@ -113,6 +113,7 @@ function GridItem< Item >( {
 			<HStack
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
+				alignment="top"
 			>
 				<HStack>
 					<div { ...clickablePrimaryItemProps }>

packages/dataviews/src/dataviews-layouts/grid/style.scss

@@ -12,11 +12,11 @@
 		position: relative;
 
 		.dataviews-view-grid__title-actions {
-			padding: $grid-unit-10 0 $grid-unit-05;
+			padding: $grid-unit-10 0 $grid-unit-10;
 		}
 
 		.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
 
 			&--clickable {
 				width: fit-content;

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) {

packages/edit-site/src/components/page-patterns/style.scss

@@ -41,6 +41,14 @@
 	flex-shrink: 0;
 }
 
+.edit-site-patterns__pattern-lock-icon {
+	min-width: min-content;
+
+	.dataviews-view-grid & {
+		align-self: start;
+	}
+}
+
 .edit-site-patterns__section-header {
 	border-bottom: 1px solid #f0f0f0;
 	padding: $grid-unit-20 $grid-unit-60;
@@ -97,6 +105,30 @@
 	.edit-site-patterns__pattern-lock-icon {
 		fill: currentcolor;
 	}
+
+	.dataviews-view-grid & {
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		white-space: normal;
+		padding-top: 3px;
+		align-self: start;
+
+		button.components-button.is-link {
+			-webkit-line-clamp: 2;
+			-webkit-box-orient: vertical;
+			display: -webkit-box;
+			white-space: normal;
+		}
+	}
+}
+
+.dataviews-all-actions-button.has-icon:not(.has-text) {
+	.dataviews-view-grid & {
+		height: 24px;
+		width: 24px;
+		min-width: 24px;
+	}
 }
 
 .edit-site-page-patterns-dataviews {