Update list item layout (#58397)

WordPress · Jan 30, 2024 · e6e0516 · e6e0516
1 parent 48f225d
commit e6e0516
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 16 deletions.
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -387,16 +387,14 @@
 				border-radius: $grid-unit-05;
 			}
 		}
-		h3 {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
+		.dataviews-view-list__primary-field {
+			min-height: $grid-unit-05 * 5;
 		}
 	}
 
 	.dataviews-view-list__media-wrapper {
-		width: $grid-unit-40;
-		height: $grid-unit-40;
+		width: $grid-unit-50;
+		height: $grid-unit-50;
 		border-radius: $grid-unit-05;
 		overflow: hidden;
 		position: relative;
@@ -429,17 +427,13 @@
 
 	.dataviews-view-list__fields {
 		color: $gray-700;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
+		display: flex;
+		gap: $grid-unit-10;
+		flex-wrap: wrap;
+		font-size: 12px;
+		line-height: $grid-unit-20;
 
 		.dataviews-view-list__field {
-			margin-right: $grid-unit-15;
-
-			&:last-child {
-				margin-right: 0;
-			}
-
 			&:empty {
 				display: none;
 			}

diff --git a/packages/dataviews/src/view-list.js b/packages/dataviews/src/view-list.js
@@ -85,7 +85,11 @@ export default function ViewList( {
 								className="dataviews-view-list__item"
 								onClick={ () => onSelectionChange( [ item ] ) }
 							>
-								<HStack spacing={ 3 } justify="start">
+								<HStack
+									spacing={ 3 }
+									justify="start"
+									alignment="flex-start"
+								>
 									<div className="dataviews-view-list__media-wrapper">
 										{ mediaField?.render( { item } ) || (
 											<div className="dataviews-view-list__media-placeholder"></div>