DataViews: Fix table view cell wrapper and BlockPreviews (#58062)

* DataViews: Fix table view cell wrapper and BlockPreviews * try preserving flex
WordPress · Jan 26, 2024 · ebab5b6 · ebab5b6
1 parent ddde310
commit ebab5b6
Show file tree

Hide file tree

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