From d9efd192e7558fafc2c81960fd682fd4593b0f28 Mon Sep 17 00:00:00 2001
From: Patrik <patrik@payloadcms.com>
Date: Wed, 11 Dec 2024 17:03:27 -0500
Subject: [PATCH] fix(ui): truncates richtext fields when displaying within a
 joins field (#9911)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### What?

Previously, `richtext` fields were not properly truncated when displayed
in a `joins` field.

`Before`:

![Screenshot 2024-12-11 at 3 42
13 PM](https://github.com/user-attachments/assets/a6f44248-8cb9-4a38-a74c-eaa88b739601)

### How?

Now - we've added proper css styling to truncate extended `richtext`
elements inside a `joins` table.

`After`:

![Screenshot 2024-12-11 at 3 41
53 PM](https://github.com/user-attachments/assets/ae846c50-2e29-411f-b056-20e4caf3ef20)
---
 .../ui/src/elements/RelationshipTable/index.scss | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/ui/src/elements/RelationshipTable/index.scss b/packages/ui/src/elements/RelationshipTable/index.scss
index a2ccb6c4101..1aa70f7e4c8 100644
--- a/packages/ui/src/elements/RelationshipTable/index.scss
+++ b/packages/ui/src/elements/RelationshipTable/index.scss
@@ -19,6 +19,22 @@
     }
 
     .table {
+      table {
+        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;
+        }
+      }
+
       th,
       td:first-child {
         min-width: 0;