From 31154bb9f55ade3e2e4cb56ddaa6c271a9ded8a9 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Mon, 21 Oct 2024 09:54:57 +0100
Subject: [PATCH] Merge pull request #21065 from overleaf/dp-limit-track-change

Truncate text in a tracked change

GitOrigin-RevId: a3c070f0ca2f51545151934d25a26a10c99b7465
---
 .../components/review-panel-change.tsx          | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
index 5e5947bd70..d72f537f2c 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
@@ -16,6 +16,15 @@ import { ReviewPanelChangeUser } from './review-panel-change-user'
 import { ReviewPanelEntry } from './review-panel-entry'
 import { useModalsContext } from '@/features/ide-react/context/modals-context'
 
+const TEXT_CHAR_LIMIT = 50
+
+const truncateText = (text: string) => {
+  if (text.length > TEXT_CHAR_LIMIT) {
+    return text.slice(0, TEXT_CHAR_LIMIT) + '...'
+  }
+  return text
+}
+
 export const ReviewPanelChange = memo<{
   change: Change<EditOperation>
   aggregate?: Change<DeleteOperation>
@@ -168,18 +177,18 @@ export const ReviewPanelChange = memo<{
                   <span>
                     {t('aggregate_changed')}:{' '}
                     <del className="review-panel-content-highlight">
-                      {aggregate.op.d}
+                      {truncateText(aggregate.op.d)}
                     </del>{' '}
                     {t('aggregate_to')}{' '}
                     <ins className="review-panel-content-highlight">
-                      {change.op.i}
+                      {truncateText(change.op.i)}
                     </ins>
                   </span>
                 ) : (
                   <span>
                     {t('tracked_change_added')}:&nbsp;
                     <ins className="review-panel-content-highlight">
-                      {change.op.i}
+                      {truncateText(change.op.i)}
                     </ins>
                   </span>
                 )}
@@ -196,7 +205,7 @@ export const ReviewPanelChange = memo<{
                 <span>
                   {t('tracked_change_deleted')}:&nbsp;
                   <del className="review-panel-content-highlight">
-                    {change.op.d}
+                    {truncateText(change.op.d)}
                   </del>
                 </span>
               </>