From 509c640a8000b6d30bc0139c8d7fca37d162a23d Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 11 Apr 2024 18:19:33 +0800
Subject: [PATCH] fix: var name too long would break ui in var assigner and end
 nodes (#3361)

---
 web/app/components/workflow/nodes/end/node.tsx               | 3 +--
 web/app/components/workflow/nodes/variable-assigner/node.tsx | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/web/app/components/workflow/nodes/end/node.tsx b/web/app/components/workflow/nodes/end/node.tsx
index c2e1b59608..e083171a55 100644
--- a/web/app/components/workflow/nodes/end/node.tsx
+++ b/web/app/components/workflow/nodes/end/node.tsx
@@ -79,8 +79,7 @@ const Node: FC<NodeProps<EndNodeType>> = ({
               </div>
             </div>
             <div className='text-xs font-normal text-gray-700'>
-              <div className='ml-0.5 text-xs font-normal text-gray-500 capitalize'>{getVarType(node?.id || '', value_selector)}</div>
-
+              <div className='max-w-[42px] ml-0.5 text-xs font-normal text-gray-500 capitalize truncate' title={getVarType(node?.id || '', value_selector)}>{getVarType(node?.id || '', value_selector)}</div>
             </div>
           </div>
         )
diff --git a/web/app/components/workflow/nodes/variable-assigner/node.tsx b/web/app/components/workflow/nodes/variable-assigner/node.tsx
index 876d4b6f3e..f478cbd9ad 100644
--- a/web/app/components/workflow/nodes/variable-assigner/node.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/node.tsx
@@ -59,12 +59,12 @@ const Node: FC<NodeProps<VariableAssignerNodeType>> = (props) => {
                         type={(node?.data.type as BlockEnum) || BlockEnum.Start}
                       />
                     </div>
-                    <div className='mx-0.5 text-xs font-medium text-gray-700'>{node?.data.title}</div>
+                    <div className='max-w-[85px] truncate mx-0.5 text-xs font-medium text-gray-700' title={node?.data.title}>{node?.data.title}</div>
                     <Line3 className='mr-0.5'></Line3>
                   </div>
                   <div className='flex items-center text-primary-600'>
                     <Variable02 className='w-3.5 h-3.5' />
-                    <div className='ml-0.5 text-xs font-medium'>{varName}</div>
+                    <div className='max-w-[75px] truncate ml-0.5 text-xs font-medium' title={varName}>{varName}</div>
                   </div>
                   {/* <div className='ml-0.5 text-xs font-normal text-gray-500'>{output_type}</div> */}
                 </div>