fix: var name too long would break ui in var assigner and end nodes (#3361)

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>
         )

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>