fix(ui): truncates long JSON cells in list view (#9214)

Original Issue: #9111

## Reproduce

Create a collection with a JSON field (or use an existing one).

Add this data:
```
{"arr":[{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "}]}
```

### Before
The full JSON object is displayed:
<img width="1336" height="404" alt="image"
src="https://github.com/user-attachments/assets/01417d3f-d3d2-4063-9aab-7b46a5bc6070"
/>

### After
Now it should be properly truncated:
<img width="1335" height="67" alt="image"
src="https://github.com/user-attachments/assets/1cd9cd53-92c9-4aba-8c43-9b991d0ad1d5"
/>

Author: kendelljoseph

packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.scss

@@ -11,6 +11,7 @@
     color: var(--theme-elevation-800);
     border-radius: $style-radius-m;
     padding: 0 base(0.25);
+    max-width: 99.9%;
     [dir='ltr'] & {
       padding-left: base(0.0875 + 0.25);
     }
@@ -20,5 +21,11 @@
 
     background: var(--theme-elevation-100);
     color: var(--theme-elevation-800);
+
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 }

packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.tsx

@@ -3,14 +3,24 @@ import type { DefaultCellComponentProps, JSONFieldClient } from 'payload'
 
 import React from 'react'
 
+import { useTranslation } from '../../../../../providers/Translation/index.js'
 import './index.scss'
+import { stringifyTruncated } from '../../../../../utilities/stringifyTruncated.js'
 
 export const JSONCell: React.FC<DefaultCellComponentProps<JSONFieldClient>> = ({ cellData }) => {
-  const textToShow = cellData?.length > 100 ? `${cellData.substring(0, 100)}\u2026` : cellData
-
-  return (
-    <code className="json-cell">
-      <span>{JSON.stringify(textToShow)}</span>
-    </code>
-  )
+  const { t } = useTranslation()
+  try {
+    const cellDataString = stringifyTruncated(cellData, 100)
+    return (
+      <code className="json-cell">
+        <span>{cellDataString}</span>
+      </code>
+    )
+  } catch (_ignore) {
+    return (
+      <code className="json-cell">
+        <span>{t('general:error')}</span>
+      </code>
+    )
+  }
 }

packages/ui/src/utilities/stringifyTruncated.ts

@@ -0,0 +1,22 @@
+/**
+ * Safely stringify a value and truncate it to a maximum length.
+ *
+ * Converts any value to a JSON string representation and truncates the resulting
+ * string if it exceeds the maximum length. If truncation occurs, an ellipsis (…)
+ * is appended to indicate incomplete output.
+ *
+ * @param value - The value to stringify (can be any type including objects, arrays, primitives)
+ * @param maxLength - The maximum character length of the output string
+ * @returns A JSON string representation, truncated with "…" if it exceeds maxLength
+ */
+export function stringifyTruncated(value: unknown, maxLength: number): string {
+  const stringifiedJSON = JSON.stringify(value)
+  const totalChars = stringifiedJSON.length
+
+  // Only truncate if the string is significantly longer (>1.5x the max length)
+  if (totalChars / maxLength > 1.5) {
+    return `${stringifiedJSON.substring(0, maxLength)}\u2026`
+  }
+
+  return stringifiedJSON
+}

test/fields/collections/JSON/e2e.spec.ts

@@ -71,6 +71,79 @@ describe('JSON', () => {
     await expect(jsonCell).toHaveText(JSON.stringify(jsonDoc.json))
   })
 
+  test('should truncate long JSON values in list view', async () => {
+    // Create a document with very long JSON (>150 chars, should truncate)
+    const longJsonData = {
+      veryLongProperty:
+        'This is a very long string value that will definitely exceed the 100 character universal truth when stringified.',
+      anotherProperty: 'Additional data to ensure we exceed the limit',
+      nested: { deep: { value: 'More nested data' } },
+    }
+
+    const longDoc = await payload.create({
+      collection: jsonFieldsSlug,
+      data: { json: longJsonData },
+    })
+
+    // Create a document with short JSON (<100 chars)
+    const shortJsonData = { short: 'value' }
+
+    const shortDoc = await payload.create({
+      collection: jsonFieldsSlug,
+      data: { json: shortJsonData },
+    })
+
+    await page.goto(url.list)
+
+    // Verify long JSON is truncated with ellipsis
+    const longJsonCell = page.locator(`tr[data-id="${longDoc.id}"] .cell-json`)
+
+    await expect(async () => {
+      const longCellText = await longJsonCell.textContent()
+      expect(longCellText).toContain('…')
+      expect(longCellText?.length).toBeLessThanOrEqual(101) // 100 chars + ellipsis
+    }).toPass()
+
+    // Verify short JSON is displayed fully without truncation
+    const shortJsonCell = page.locator(`tr[data-id="${shortDoc.id}"] .cell-json`)
+
+    await expect(shortJsonCell).toHaveText(JSON.stringify(shortJsonData))
+    await expect(async () => {
+      const shortCellText = await shortJsonCell.textContent()
+      expect(shortCellText).not.toContain('…')
+    }).toPass()
+  })
+
+  test('should not truncate slightly long JSON values (>100 but <=150 chars)', async () => {
+    // Create JSON that's between 100-150 chars (should NOT truncate due to 1.5x rule)
+    // This string is ~120 characters when stringified
+    const slightlyLongJsonData = {
+      property1: 'This value is specifically designed to be over one hundred characters',
+      property2: 'but under 150 total',
+    }
+
+    const stringified = JSON.stringify(slightlyLongJsonData)
+    expect(stringified.length).toBeGreaterThan(100)
+    expect(stringified.length).toBeLessThanOrEqual(150)
+
+    const doc = await payload.create({
+      collection: jsonFieldsSlug,
+      data: { json: slightlyLongJsonData },
+    })
+
+    await page.goto(url.list)
+
+    // Verify the JSON is displayed fully without truncation
+    const jsonCell = page.locator(`tr[data-id="${doc.id}"] .cell-json`)
+
+    await expect(jsonCell).toHaveText(stringified)
+    await expect(async () => {
+      const cellText = jsonCell
+      await expect(cellText).not.toContainText('…')
+      await expect(cellText).toHaveText(stringified)
+    }).toPass()
+  })
+
   test('should create', async () => {
     const input = '{"foo": "bar"}'
     await page.goto(url.create)