Added max-width to DataView columns

packages/dataviews/CHANGELOG.md

@@ -10,6 +10,7 @@
 
 - Fix `filterSortAndPaginate` to handle searching fields that have a type of `array` ([#70785](https://github.com/WordPress/gutenberg/pull/70785)).
 - Fix user-input filters: empty value for text and integer filters means there's no value to search for (so it returns all items). It also fixes a type conversion where empty strings for integer were converted to 0 [#70956](https://github.com/WordPress/gutenberg/pull/70956/).
+- Fix Table layout Title's column wrapping and min-width so that long descriptions can be visualized without scrolling. [#70983](https://github.com/WordPress/gutenberg/pull/70983)
 
 ### Features
 

packages/dataviews/src/components/dataviews/stories/fixtures.tsx

@@ -41,7 +41,8 @@ export const data: SpaceObject[] = [
 	{
 		id: 1,
 		title: 'Moon',
-		description: "Earth's satellite",
+		description:
+			'The Moon is Earth’s only natural satellite, orbiting at an average distance of 384,400 kilometers with a synchronous rotation that leads to fixed lunar phases as seen from Earth. Its cratered surface and subtle glow define night skies, inspiring exploration missions and influencing tides and biological rhythms worldwide.',
 		image: 'https://live.staticflickr.com/7398/9458193857_e1256123e3_z.jpg',
 		type: 'Satellite',
 		isPlanet: false,

packages/dataviews/src/dataviews-layouts/table/column-primary.tsx

@@ -47,7 +47,11 @@ function ColumnPrimary< Item >( {
 					<mediaField.render item={ item } field={ mediaField } />
 				</div>
 			) }
-			<VStack spacing={ 0 }>
+			<VStack
+				spacing={ 0 }
+				alignment="flex-start"
+				className="dataviews-view-table__primary-column-content"
+			>
 				{ titleField && (
 					<ItemClickWrapper
 						item={ item }

packages/dataviews/src/dataviews-layouts/table/style.scss

@@ -16,7 +16,6 @@
 	td,
 	th {
 		padding: $grid-unit-15;
-		white-space: nowrap;
 
 		&.dataviews-view-table__actions-column {
 			text-align: right;
@@ -44,6 +43,11 @@
 		&.dataviews-view-table__checkbox-column {
 			padding-right: 0;
 			width: 1%;
+
+			.dataviews-view-table__cell-content-wrapper {
+				max-width: auto;
+				min-width: auto;
+			}
 		}
 	}
 	tr {
@@ -198,6 +202,8 @@
 
 	.dataviews-view-table__actions-column {
 		width: 1%;
+		max-width: inherit;
+		min-width: inherit;
 	}
 
 	&:has(tr.is-selected) {
@@ -283,3 +289,11 @@
 		border-radius: $radius-medium;
 	}
 }
+
+.dataviews-view-table__cell-content-wrapper,
+.dataviews-view-table__primary-column-content {
+	&:not(.dataviews-column-primary__media) {
+		min-width: 15ch;
+		max-width: 80ch;
+	}
+}

packages/dataviews/src/test/filter-and-sort-data-view.js

@@ -55,7 +55,9 @@ describe( 'filters', () => {
 			fields
 		);
 		expect( result ).toHaveLength( 2 );
-		expect( result[ 0 ].description ).toBe( "Earth's satellite" );
+		expect( result[ 0 ].description ).toBe(
+			'The Moon is Earth’s only natural satellite, orbiting at an average distance of 384,400 kilometers with a synchronous rotation that leads to fixed lunar phases as seen from Earth. Its cratered surface and subtle glow define night skies, inspiring exploration missions and influencing tides and biological rhythms worldwide.'
+		);
 	} );
 
 	it( 'should perform case-insensitive and accent-insensitive search', () => {
@@ -422,7 +424,7 @@ describe( 'filters', () => {
 			fields
 		);
 		expect( result.map( ( r ) => r.description ) ).toEqual( [
-			"Earth's satellite",
+			'The Moon is Earth’s only natural satellite, orbiting at an average distance of 384,400 kilometers with a synchronous rotation that leads to fixed lunar phases as seen from Earth. Its cratered surface and subtle glow define night skies, inspiring exploration missions and influencing tides and biological rhythms worldwide.',
 			'Moon of Jupiter',
 			'Moon of Jupiter',
 			'La planète Vénus',

packages/edit-site/src/components/page-templates/fields.js

@@ -69,13 +69,7 @@ export const descriptionField = {
 	label: __( 'Description' ),
 	id: 'description',
 	render: ( { item } ) => {
-		return (
-			item.description && (
-				<span className="page-templates-description">
-					{ decodeEntities( item.description ) }
-				</span>
-			)
-		);
+		return item.description && decodeEntities( item.description );
 	},
 	enableSorting: false,
 	enableGlobalSearch: true,

packages/edit-site/src/components/page-templates/index.js

@@ -35,13 +35,6 @@ const EMPTY_ARRAY = [];
 const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
 		showMedia: false,
-		layout: {
-			styles: {
-				author: {
-					width: '1%',
-				},
-			},
-		},
 	},
 	[ LAYOUT_GRID ]: {
 		showMedia: true,

packages/edit-site/src/components/page-templates/style.scss

@@ -28,24 +28,12 @@
 	}
 }
 
-.page-templates-description {
-	max-width: 50em;
-	text-wrap: balance; // Fallback for Safari
-	text-wrap: pretty;
-
-	.dataviews-view-table & {
-		margin-bottom: $grid-unit-10;
-		display: block;
-	}
-}
-
 .edit-site-page-templates {
 	.dataviews-pagination {
 		z-index: z-index(".edit-site-templates__dataviews-list-pagination");
 	}
 }
 
-
 .page-templates-author-field__avatar {
 	flex-shrink: 0;
 	overflow: hidden;