Update cell vertical alignment

WordPress · Jan 12, 2024 · 53fff0f · 53fff0f
1 parent 3c57278
commit 53fff0f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 15 deletions.
diff --git 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
@@ -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 && (