chore: restricts character length in table cells (#4063)

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>
     )

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;

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])
 

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

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 () => {