From 53fff0f474b20c760190f3091be5dbfbf35d8064 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Fri, 12 Jan 2024 13:15:58 +0000
Subject: [PATCH] Update cell vertical alignment

---
 packages/dataviews/src/style.scss    | 11 ++++++++-
 packages/dataviews/src/view-table.js | 34 ++++++++++++++++------------
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index d934ea0df62d0..b44626e4aa155 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -168,7 +168,16 @@
 			padding-left: $grid-unit-05;
 		}
 	}
-
+	tbody {
+		td {
+			vertical-align: top;
+		}
+		.dataviews-view-table__cell-content-wrapper {
+			min-height: $grid-unit-40;
+			display: flex;
+			align-items: center;
+		}
+	}
 	.dataviews-view-table-header-button {
 		padding: $grid-unit-05 $grid-unit-10;
 		font-size: 11px;
diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
index e59c4e001919c..22e68b4f56331 100644
--- a/packages/dataviews/src/view-table.js
+++ b/packages/dataviews/src/view-table.js
@@ -536,17 +536,21 @@ function ViewTable( {
 											minWidth: 20,
 										} }
 									>
-										<SingleSelectionCheckbox
-											id={ getItemId( item ) || index }
-											item={ item }
-											selection={ selection }
-											onSelectionChange={
-												onSelectionChange
-											}
-											getItemId={ getItemId }
-											data={ data }
-											primaryField={ primaryField }
-										/>
+										<span className="dataviews-view-table__cell-content-wrapper">
+											<SingleSelectionCheckbox
+												id={
+													getItemId( item ) || index
+												}
+												item={ item }
+												selection={ selection }
+												onSelectionChange={
+													onSelectionChange
+												}
+												getItemId={ getItemId }
+												data={ data }
+												primaryField={ primaryField }
+											/>
+										</span>
 									</td>
 								) }
 								{ visibleFields.map( ( field ) => (
@@ -560,9 +564,11 @@ function ViewTable( {
 												field.maxWidth || undefined,
 										} }
 									>
-										{ field.render( {
-											item,
-										} ) }
+										<span className="dataviews-view-table__cell-content-wrapper">
+											{ field.render( {
+												item,
+											} ) }
+										</span>
 									</td>
 								) ) }
 								{ !! actions?.length && (