From 78e01b9353949e8e8de8aeea29622074f016b899 Mon Sep 17 00:00:00 2001
From: Younglina <younglina0409@outlook.com>
Date: Mon, 17 Mar 2025 13:56:00 +0800
Subject: [PATCH] fix: add text overflow ellipsis and title for iteration and
 loop log triggers

---
 .../iteration-log/iteration-log-trigger.tsx    | 18 ++++++++++++------
 .../workflow/run/loop-log/loop-log-trigger.tsx | 18 ++++++++++++------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx b/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
index 93c6495216..cc2e8146b8 100644
--- a/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
+++ b/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
@@ -37,18 +37,24 @@ const IterationLogTrigger = ({
     e.nativeEvent.stopImmediatePropagation()
     onShowIterationResultList(nodeInfo.details || [], nodeInfo?.iterDurationMap || nodeInfo.execution_metadata?.iteration_duration_map || {})
   }
+  
+  const iterationText = t('workflow.nodes.iteration.iteration', { count: getCount(nodeInfo.details?.length, nodeInfo.metadata?.iterator_length) }) + 
+    (getErrorCount(nodeInfo.details) > 0 ? 
+      `${t('workflow.nodes.iteration.comma')}${t('workflow.nodes.iteration.error', { count: getErrorCount(nodeInfo.details) })}` : 
+      '')
+  
   return (
     <Button
       className='flex items-center w-full self-stretch gap-2 px-3 py-2 bg-components-button-tertiary-bg-hover hover:bg-components-button-tertiary-bg-hover rounded-lg cursor-pointer border-none'
       onClick={handleOnShowIterationDetail}
     >
       <Iteration className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
-      <div className='flex-1 text-left system-sm-medium text-components-button-tertiary-text'>{t('workflow.nodes.iteration.iteration', { count: getCount(nodeInfo.details?.length, nodeInfo.metadata?.iterator_length) })}{getErrorCount(nodeInfo.details) > 0 && (
-        <>
-          {t('workflow.nodes.iteration.comma')}
-          {t('workflow.nodes.iteration.error', { count: getErrorCount(nodeInfo.details) })}
-        </>
-      )}</div>
+      <div 
+        className='flex-1 text-left system-sm-medium text-components-button-tertiary-text whitespace-nowrap overflow-hidden text-ellipsis'
+        title={iterationText}
+      >
+        {iterationText}
+      </div>
       <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
     </Button>
   )
diff --git a/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx b/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx
index 378f09119f..3b7524de7c 100644
--- a/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx
+++ b/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx
@@ -37,18 +37,24 @@ const LoopLogTrigger = ({
     e.nativeEvent.stopImmediatePropagation()
     onShowLoopResultList(nodeInfo.details || [], nodeInfo?.loopDurationMap || nodeInfo.execution_metadata?.loop_duration_map || {})
   }
+  
+  const loopText = t('workflow.nodes.loop.loop', { count: getCount(nodeInfo.details?.length, nodeInfo.metadata?.loop_length) }) + 
+    (getErrorCount(nodeInfo.details) > 0 ? 
+      `${t('workflow.nodes.loop.comma')}${t('workflow.nodes.loop.error', { count: getErrorCount(nodeInfo.details) })}` : 
+      '')
+  
   return (
     <Button
       className='flex items-center w-full self-stretch gap-2 px-3 py-2 bg-components-button-tertiary-bg-hover hover:bg-components-button-tertiary-bg-hover rounded-lg cursor-pointer border-none'
       onClick={handleOnShowLoopDetail}
     >
       <Loop className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
-      <div className='flex-1 text-left system-sm-medium text-components-button-tertiary-text'>{t('workflow.nodes.loop.loop', { count: getCount(nodeInfo.details?.length, nodeInfo.metadata?.loop_length) })}{getErrorCount(nodeInfo.details) > 0 && (
-        <>
-          {t('workflow.nodes.loop.comma')}
-          {t('workflow.nodes.loop.error', { count: getErrorCount(nodeInfo.details) })}
-        </>
-      )}</div>
+      <div 
+        className='flex-1 text-left system-sm-medium text-components-button-tertiary-text whitespace-nowrap overflow-hidden text-ellipsis'
+        title={loopText}
+      >
+        {loopText}
+      </div>
       <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
     </Button>
   )