From 4ec5643dd7d9fbba00f8e2d2852f19d9aa647aac Mon Sep 17 00:00:00 2001
From: Alessio Gravili <70709113+AlessioGr@users.noreply.github.com>
Date: Tue, 14 Nov 2023 17:25:24 +0100
Subject: [PATCH] chore: restricts character length in table cells (#4063)

---
 .../views/collections/List/Cell/index.tsx        |  5 +++--
 .../components/views/collections/List/index.scss |  9 +++++++++
 packages/richtext-lexical/src/cell/index.tsx     |  7 +------
 packages/richtext-slate/src/cell/index.tsx       |  6 +++---
 test/fields/e2e.spec.ts                          | 16 ++++++++++++++++
 5 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/packages/payload/src/admin/components/views/collections/List/Cell/index.tsx b/packages/payload/src/admin/components/views/collections/List/Cell/index.tsx
index 809cb6bf4..3d6fee456 100644
--- a/packages/payload/src/admin/components/views/collections/List/Cell/index.tsx
+++ b/packages/payload/src/admin/components/views/collections/List/Cell/index.tsx
@@ -2,9 +2,10 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 
+import type { CodeField } from '../../../../../../fields/config/types'
 import type { CellComponentProps, Props } from './types'
 
-import { CodeField, fieldAffectsData } from '../../../../../../fields/config/types'
+import { fieldAffectsData } from '../../../../../../fields/config/types'
 import { getTranslation } from '../../../../../../utilities/getTranslation'
 import { useConfig } from '../../../../utilities/Config'
 import RenderCustomComponent from '../../../../utilities/RenderCustomComponent'
@@ -60,8 +61,8 @@ const DefaultCell: React.FC<Props> = (props) => {
           collection={collection}
           data={`ID: ${cellData}`}
           field={field as CodeField}
-          rowData={rowData}
           nowrap
+          rowData={rowData}
         />
       </WrapElement>
     )
diff --git a/packages/payload/src/admin/components/views/collections/List/index.scss b/packages/payload/src/admin/components/views/collections/List/index.scss
index 5e3db4ca1..c90fd8596 100644
--- a/packages/payload/src/admin/components/views/collections/List/index.scss
+++ b/packages/payload/src/admin/components/views/collections/List/index.scss
@@ -43,6 +43,15 @@
       width: 100%;
       overflow: auto;
 
+      [class^="cell"] > p, [class^="cell"] > span, [class^="cell"] > a {
+        line-clamp: 4;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 4;
+        overflow: hidden;
+        display: -webkit-box;
+        max-width: 100vw;
+      }
+
       #heading-_select,
       .cell-_select {
         min-width: unset;
diff --git a/packages/richtext-lexical/src/cell/index.tsx b/packages/richtext-lexical/src/cell/index.tsx
index c3a3c51d3..aa1ae8689 100644
--- a/packages/richtext-lexical/src/cell/index.tsx
+++ b/packages/richtext-lexical/src/cell/index.tsx
@@ -63,12 +63,7 @@ export const RichTextCell: React.FC<
         return $getRoot().getTextContent()
       }) || ''
 
-    // Limit preview to 150 characters
-    if (textContent.length > 150) {
-      setPreview(textContent.slice(0, 150) + '...')
-      return
-    }
-
+    // Limiting the number of characters shown is done in a CSS rule
     setPreview(textContent)
   }, [data, editorConfig])
 
diff --git a/packages/richtext-slate/src/cell/index.tsx b/packages/richtext-slate/src/cell/index.tsx
index 9ecefdd5f..256ae7b9a 100644
--- a/packages/richtext-slate/src/cell/index.tsx
+++ b/packages/richtext-slate/src/cell/index.tsx
@@ -9,9 +9,9 @@ const RichTextCell: React.FC<
   CellComponentProps<RichTextField<any[], AdapterArguments, AdapterArguments>, any>
 > = ({ data }) => {
   const flattenedText = data?.map((i) => i?.children?.map((c) => c.text)).join(' ')
-  const textToShow =
-    flattenedText?.length > 100 ? `${flattenedText.slice(0, 100)}\u2026` : flattenedText
-  return <span>{textToShow}</span>
+
+  // Limiting the number of characters shown is done in a CSS rule
+  return <span>{flattenedText}</span>
 }
 
 export default RichTextCell
diff --git a/test/fields/e2e.spec.ts b/test/fields/e2e.spec.ts
index 848175ddf..dac0b5c9a 100644
--- a/test/fields/e2e.spec.ts
+++ b/test/fields/e2e.spec.ts
@@ -867,6 +867,22 @@ describe('fields', () => {
       await page.goto(url.list)
       await page.locator('.row-1 .cell-title a').click()
     }
+    describe('cell', () => {
+      test('ensure cells are smaller than 300px in height', async () => {
+        const url: AdminUrlUtil = new AdminUrlUtil(serverURL, 'rich-text-fields')
+        await page.goto(url.list) // Navigate to rich-text list view
+
+        const table = page.locator('.list-controls ~ .table')
+        const lexicalCell = table.locator('.cell-lexicalCustomFields').first()
+        const lexicalHtmlCell = table.locator('.cell-lexicalCustomFields_html').first()
+        const entireRow = table.locator('.row-1').first()
+
+        // Make sure each of the 3 above are no larger than 300px in height:
+        expect((await lexicalCell.boundingBox()).height).toBeLessThanOrEqual(300)
+        expect((await lexicalHtmlCell.boundingBox()).height).toBeLessThanOrEqual(300)
+        expect((await entireRow.boundingBox()).height).toBeLessThanOrEqual(300)
+      })
+    })
 
     describe('toolbar', () => {
       test('should run url validation', async () => {