From ebab5b682ff9aa5eccbf630747a6f41ce79fa5db Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Fri, 26 Jan 2024 11:01:14 +0200
Subject: [PATCH] DataViews: Fix table view cell wrapper and BlockPreviews
 (#58062)

* DataViews: Fix table view cell wrapper and BlockPreviews

* try preserving flex
---
 packages/dataviews/src/style.scss    | 4 ++++
 packages/dataviews/src/view-table.js | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 6ce1b9dadcae5..382da9fad5b20 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -181,6 +181,10 @@
 			min-height: $grid-unit-40;
 			display: flex;
 			align-items: center;
+
+			> * {
+				flex-grow: 1;
+			}
 		}
 	}
 	.dataviews-view-table-header-button {
diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
index 361b4091d646f..264662c19369d 100644
--- a/packages/dataviews/src/view-table.js
+++ b/packages/dataviews/src/view-table.js
@@ -539,7 +539,7 @@ function ViewTable( {
 											minWidth: 20,
 										} }
 									>
-										<span className="dataviews-view-table__cell-content-wrapper">
+										<div className="dataviews-view-table__cell-content-wrapper">
 											<SingleSelectionCheckbox
 												id={
 													getItemId( item ) || index
@@ -553,7 +553,7 @@ function ViewTable( {
 												data={ data }
 												primaryField={ primaryField }
 											/>
-										</span>
+										</div>
 									</td>
 								) }
 								{ visibleFields.map( ( field ) => (
@@ -567,7 +567,7 @@ function ViewTable( {
 												field.maxWidth || undefined,
 										} }
 									>
-										<span
+										<div
 											className={ classnames(
 												'dataviews-view-table__cell-content-wrapper',
 												{
@@ -580,7 +580,7 @@ function ViewTable( {
 											{ field.render( {
 												item,
 											} ) }
-										</span>
+										</div>
 									</td>
 								) ) }
 								{ !! actions?.length && (