Chore: frontend infrastructure upgrade (#16420)

Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>

web/app/components/workflow/nodes/if-else/components/condition-add.tsx

@@ -18,7 +18,7 @@ import type {
   Var,
 } from '@/app/components/workflow/types'
 
-interface ConditionAddProps {
+type ConditionAddProps = {
   className?: string
   caseId: string
   variables: NodeOutPutVar[]
@@ -56,12 +56,12 @@ const ConditionAdd = ({
           className={className}
           disabled={disabled}
         >
-          <RiAddLine className='mr-1 w-3.5 h-3.5' />
+          <RiAddLine className='mr-1 h-3.5 w-3.5' />
           {t('workflow.nodes.ifElse.addCondition')}
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className='w-[296px] bg-components-panel-bg-blur rounded-lg border-[0.5px] border-components-panel-border shadow-lg'>
+        <div className='w-[296px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
           <VarReferenceVars
             vars={variables}
             isSupportFileVar

web/app/components/workflow/nodes/if-else/components/condition-files-list-value.tsx

@@ -75,10 +75,10 @@ const ConditionValue = ({
 
   return (
     <div className='rounded-md bg-workflow-block-parma-bg'>
-      <div className='flex items-center px-1 h-6 '>
-        {!isEnvVar && !isChatVar && <Variable02 className='shrink-0 mr-1 w-3.5 h-3.5 text-text-accent' />}
-        {isEnvVar && <Env className='shrink-0 mr-1 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
-        {isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
+      <div className='flex h-6 items-center px-1 '>
+        {!isEnvVar && !isChatVar && <Variable02 className='mr-1 h-3.5 w-3.5 shrink-0 text-text-accent' />}
+        {isEnvVar && <Env className='mr-1 h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />}
+        {isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />}
 
         <div
           className={cn(
@@ -90,20 +90,20 @@ const ConditionValue = ({
           {variableName}
         </div>
         <div
-          className='shrink-0 mx-1 text-xs font-medium text-text-primary'
+          className='mx-1 shrink-0 text-xs font-medium text-text-primary'
           title={operatorName}
         >
           {operatorName}
         </div>
       </div>
-      <div className='ml-[10px] pl-[10px] border-l border-divider-regular'>
+      <div className='ml-[10px] border-l border-divider-regular pl-[10px]'>
         {
           sub_variable_condition?.conditions.map((c: Condition, index) => (
-            <div className='relative flex items-center h-6 space-x-1' key={c.id}>
-              <div className='text-text-accent system-xs-medium'>{c.key}</div>
-              <div className='text-text-primary system-xs-medium'>{isComparisonOperatorNeedTranslate(c.comparison_operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${c.comparison_operator}`) : c.comparison_operator}</div>
-              {c.comparison_operator && !isEmptyRelatedOperator(c.comparison_operator) && <div className='text-text-secondary system-xs-regular'>{isSelect(c) ? selectName(c) : formatValue(c)}</div>}
-              {index !== sub_variable_condition.conditions.length - 1 && (<div className='absolute z-10 right-1 bottom-[-10px] leading-4 text-[10px] font-medium text-text-accent uppercase'>{t(`${i18nPrefix}.${sub_variable_condition.logical_operator}`)}</div>)}
+            <div className='relative flex h-6 items-center space-x-1' key={c.id}>
+              <div className='system-xs-medium text-text-accent'>{c.key}</div>
+              <div className='system-xs-medium text-text-primary'>{isComparisonOperatorNeedTranslate(c.comparison_operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${c.comparison_operator}`) : c.comparison_operator}</div>
+              {c.comparison_operator && !isEmptyRelatedOperator(c.comparison_operator) && <div className='system-xs-regular text-text-secondary'>{isSelect(c) ? selectName(c) : formatValue(c)}</div>}
+              {index !== sub_variable_condition.conditions.length - 1 && (<div className='absolute bottom-[-10px] right-1 z-10 text-[10px] font-medium uppercase leading-4 text-text-accent'>{t(`${i18nPrefix}.${sub_variable_condition.logical_operator}`)}</div>)}
             </div>
           ))
         }

web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx

@@ -205,13 +205,13 @@ const ConditionItem = ({
   }, [condition, doUpdateCondition])
 
   return (
-    <div className={cn('flex mb-1 last-of-type:mb-0', className)}>
+    <div className={cn('mb-1 flex last-of-type:mb-0', className)}>
       <div className={cn(
-        'grow bg-components-input-bg-normal rounded-lg',
+        'grow rounded-lg bg-components-input-bg-normal',
         isHovered && 'bg-state-destructive-hover',
       )}>
         <div className='flex items-center p-1'>
-          <div className='grow w-0'>
+          <div className='w-0 grow'>
             {isSubVarSelect
               ? (
                 <Select
@@ -223,13 +223,13 @@ const ConditionItem = ({
                   onSelect={item => handleSubVarKeyChange(item.value as string)}
                   renderTrigger={item => (
                     item
-                      ? <div className='flex justify-start cursor-pointer'>
-                        <div className='inline-flex max-w-full px-1.5 items-center h-6 rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark shadow-xs text-text-accent'>
-                          <Variable02 className='shrink-0 w-3.5 h-3.5 text-text-accent' />
-                          <div className='ml-0.5 truncate system-xs-medium'>{item?.name}</div>
+                      ? <div className='flex cursor-pointer justify-start'>
+                        <div className='inline-flex h-6 max-w-full items-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark px-1.5 text-text-accent shadow-xs'>
+                          <Variable02 className='h-3.5 w-3.5 shrink-0 text-text-accent' />
+                          <div className='system-xs-medium ml-0.5 truncate'>{item?.name}</div>
                         </div>
                       </div>
-                      : <div className='text-left text-components-input-text-placeholder system-sm-regular'>{t('common.placeholder.select')}</div>
+                      : <div className='system-sm-regular text-left text-components-input-text-placeholder'>{t('common.placeholder.select')}</div>
                   )}
                   hideChecked
                 />
@@ -247,7 +247,7 @@ const ConditionItem = ({
               )}
 
           </div>
-          <div className='mx-1 w-[1px] h-3 bg-divider-regular'></div>
+          <div className='mx-1 h-3 w-[1px] bg-divider-regular'></div>
           <ConditionOperator
             disabled={!canChooseOperator}
             varType={condition.varType}
@@ -258,7 +258,7 @@ const ConditionItem = ({
         </div>
         {
           !comparisonOperatorNotRequireValue(condition.comparison_operator) && !isNotInput && condition.varType !== VarType.number && (
-            <div className='px-2 py-1 max-h-[100px] border-t border-t-divider-subtle overflow-y-auto'>
+            <div className='max-h-[100px] overflow-y-auto border-t border-t-divider-subtle px-2 py-1'>
               <ConditionInput
                 disabled={disabled}
                 value={condition.value as string}
@@ -271,7 +271,7 @@ const ConditionItem = ({
         }
         {
           !comparisonOperatorNotRequireValue(condition.comparison_operator) && !isNotInput && condition.varType === VarType.number && (
-            <div className='px-2 py-1 pt-[3px] border-t border-t-divider-subtle'>
+            <div className='border-t border-t-divider-subtle px-2 py-1 pt-[3px]'>
               <ConditionNumberInput
                 numberVarType={condition.numberVarType}
                 onNumberVarTypeChange={handleUpdateConditionNumberVarType}
@@ -289,7 +289,7 @@ const ConditionItem = ({
             <div className='border-t border-t-divider-subtle'>
               <Select
                 wrapperClassName='h-8'
-                className='px-2 text-xs rounded-t-none'
+                className='rounded-t-none px-2 text-xs'
                 defaultValue={isArrayValue ? (condition.value as string[])?.[0] : (condition.value as string)}
                 items={selectOptions}
                 onSelect={item => handleUpdateConditionValue(item.value as string)}
@@ -322,12 +322,12 @@ const ConditionItem = ({
         }
       </div>
       <div
-        className='shrink-0 flex items-center justify-center ml-1 mt-1 w-6 h-6 rounded-lg cursor-pointer hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive'
+        className='ml-1 mt-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         onClick={doRemoveCondition}
       >
-        <RiDeleteBinLine className='w-4 h-4' />
+        <RiDeleteBinLine className='h-4 w-4' />
       </div>
     </div>
   )

web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx

@@ -16,7 +16,7 @@ import type { VarType } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
 const i18nPrefix = 'workflow.nodes.ifElse'
 
-interface ConditionOperatorProps {
+type ConditionOperatorProps = {
   className?: string
   disabled?: boolean
   varType: VarType
@@ -66,16 +66,16 @@ const ConditionOperator = ({
               ? selectedOption.label
               : t(`${i18nPrefix}.select`)
           }
-          <RiArrowDownSLine className='ml-1 w-3.5 h-3.5' />
+          <RiArrowDownSLine className='ml-1 h-3.5 w-3.5' />
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-10'>
-        <div className='p-1 bg-components-panel-bg-blur rounded-xl border-[0.5px] border-components-panel-border shadow-lg'>
+        <div className='rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
           {
             options.map(option => (
               <div
                 key={option.value}
-                className='flex items-center px-3 py-1.5 h-7 text-[13px] font-medium text-text-secondary rounded-lg cursor-pointer hover:bg-state-base-hover'
+                className='flex h-7 cursor-pointer items-center rounded-lg px-3 py-1.5 text-[13px] font-medium text-text-secondary hover:bg-state-base-hover'
                 onClick={() => {
                   onSelect(option.value)
                   setOpen(false)

web/app/components/workflow/nodes/if-else/components/condition-list/condition-var-selector.tsx

@@ -43,7 +43,7 @@ const ConditionVarSelector = ({
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className='w-[296px] bg-components-panel-bg-blur rounded-lg border-[0.5px] border-components-panel-border shadow-lg'>
+        <div className='w-[296px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
           <VarReferenceVars
             vars={nodesOutputVars}
             isSupportFileVar

web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx

@@ -19,7 +19,7 @@ import type {
 } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
 
-interface ConditionListProps {
+type ConditionListProps = {
   isSubVariable?: boolean
   disabled?: boolean
   caseId: string
@@ -87,18 +87,18 @@ const ConditionList = ({
       {
         conditions.length > 1 && (
           <div className={cn(
-            'absolute top-0 bottom-0 left-0 w-[60px]',
+            'absolute bottom-0 left-0 top-0 w-[60px]',
             isSubVariable && logical_operator === LogicalOperator.and && 'left-[-10px]',
             isSubVariable && logical_operator === LogicalOperator.or && 'left-[-18px]',
           )}>
-            <div className='absolute top-4 bottom-4 left-[46px] w-2.5 border border-divider-deep rounded-l-[8px] border-r-0'></div>
-            <div className='absolute top-1/2 -translate-y-1/2 right-0 w-4 h-[29px] bg-components-panel-bg'></div>
+            <div className='absolute bottom-4 left-[46px] top-4 w-2.5 rounded-l-[8px] border border-r-0 border-divider-deep'></div>
+            <div className='absolute right-0 top-1/2 h-[29px] w-4 -translate-y-1/2 bg-components-panel-bg'></div>
             <div
-              className='absolute top-1/2 right-1 -translate-y-1/2 flex items-center px-1 h-[21px] rounded-md border-[0.5px] border-components-button-secondary-border shadow-xs bg-components-button-secondary-bg text-text-accent-secondary text-[10px] font-semibold cursor-pointer select-none'
+              className='absolute right-1 top-1/2 flex h-[21px] -translate-y-1/2 cursor-pointer select-none items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1 text-[10px] font-semibold text-text-accent-secondary shadow-xs'
               onClick={doToggleConditionLogicalOperator}
             >
               {logical_operator.toUpperCase()}
-              <RiLoopLeftLine className='ml-0.5 w-3 h-3' />
+              <RiLoopLeftLine className='ml-0.5 h-3 w-3' />
             </div>
           </div>
         )

web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx

@@ -30,7 +30,7 @@ const options = [
   NumberVarType.constant,
 ]
 
-interface ConditionNumberInputProps {
+type ConditionNumberInputProps = {
   numberVarType?: NumberVarType
   onNumberVarTypeChange: (v: NumberVarType) => void
   value: string
@@ -62,7 +62,7 @@ const ConditionNumberInput = ({
   }, [onValueChange])
 
   return (
-    <div className='flex items-center cursor-pointer'>
+    <div className='flex cursor-pointer items-center'>
       <PortalToFollowElem
         open={numberVarTypeVisible}
         onOpenChange={setNumberVarTypeVisible}
@@ -76,17 +76,17 @@ const ConditionNumberInput = ({
             size='small'
           >
             {capitalize(numberVarType)}
-            <RiArrowDownSLine className='ml-[1px] w-3.5 h-3.5' />
+            <RiArrowDownSLine className='ml-[1px] h-3.5 w-3.5' />
           </Button>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1000]'>
-          <div className='p-1 w-[112px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
+          <div className='w-[112px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
             {
               options.map(option => (
                 <div
                   key={option}
                   className={cn(
-                    'flex items-center px-3 h-7 rounded-md hover:bg-state-base-hover cursor-pointer',
+                    'flex h-7 cursor-pointer items-center rounded-md px-3 hover:bg-state-base-hover',
                     'text-[13px] font-medium text-text-secondary',
                     numberVarType === option && 'bg-state-base-hover',
                   )}
@@ -102,8 +102,8 @@ const ConditionNumberInput = ({
           </div>
         </PortalToFollowElemContent>
       </PortalToFollowElem>
-      <div className='mx-1 w-[1px] h-4 bg-divider-regular'></div>
-      <div className='grow w-0 ml-0.5'>
+      <div className='mx-1 h-4 w-[1px] bg-divider-regular'></div>
+      <div className='ml-0.5 w-0 grow'>
         {
           numberVarType === NumberVarType.variable && (
             <PortalToFollowElem
@@ -126,15 +126,15 @@ const ConditionNumberInput = ({
                 }
                 {
                   !value && (
-                    <div className='flex items-center p-1 h-6 text-components-input-text-placeholder text-[13px]'>
-                      <Variable02 className='shrink-0 mr-1 w-4 h-4' />
+                    <div className='flex h-6 items-center p-1 text-[13px] text-components-input-text-placeholder'>
+                      <Variable02 className='mr-1 h-4 w-4 shrink-0' />
                       <div className='w-0 grow truncate'>{t('workflow.nodes.ifElse.selectVariable')}</div>
                     </div>
                   )
                 }
               </PortalToFollowElemTrigger>
               <PortalToFollowElemContent className='z-[1000]'>
-                <div className={cn('w-[296px] pt-1 bg-components-panel-bg-blur rounded-lg border-[0.5px] border-components-panel-border shadow-lg', isShort && 'w-[200px]')}>
+                <div className={cn('w-[296px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pt-1 shadow-lg', isShort && 'w-[200px]')}>
                   <VarReferenceVars
                     vars={variables}
                     onChange={handleSelectVariable}
@@ -148,7 +148,7 @@ const ConditionNumberInput = ({
           numberVarType === NumberVarType.constant && (
             <div className=' relative'>
               <input
-                className={cn('block w-full px-2 text-[13px] text-components-input-text-filled placeholder:text-components-input-text-placeholder outline-none appearance-none bg-transparent', unit && 'pr-6')}
+                className={cn('block w-full appearance-none bg-transparent px-2 text-[13px] text-components-input-text-filled outline-none placeholder:text-components-input-text-placeholder', unit && 'pr-6')}
                 type='number'
                 value={value}
                 onChange={e => onValueChange(e.target.value)}
@@ -156,7 +156,7 @@ const ConditionNumberInput = ({
                 onFocus={setFocus}
                 onBlur={setBlur}
               />
-              {!isFocus && unit && <div className='absolute right-2 top-[50%] translate-y-[-50%] text-text-tertiary system-sm-regular'>{unit}</div>}
+              {!isFocus && unit && <div className='system-sm-regular absolute right-2 top-[50%] translate-y-[-50%] text-text-tertiary'>{unit}</div>}
             </div>
           )
         }

web/app/components/workflow/nodes/if-else/components/condition-value.tsx

@@ -75,14 +75,14 @@ const ConditionValue = ({
   }, [isSelect, t, value])
 
   return (
-    <div className='flex items-center px-1 h-6 rounded-md bg-workflow-block-parma-bg'>
-      {!isEnvVar && !isChatVar && <Variable02 className={cn('shrink-0 mr-1 w-3.5 h-3.5 text-text-accent', isException && 'text-text-warning')} />}
-      {isEnvVar && <Env className='shrink-0 mr-1 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
-      {isChatVar && <BubbleX className='w-3.5 h-3.5 text-util-colors-teal-teal-700' />}
+    <div className='flex h-6 items-center rounded-md bg-workflow-block-parma-bg px-1'>
+      {!isEnvVar && !isChatVar && <Variable02 className={cn('mr-1 h-3.5 w-3.5 shrink-0 text-text-accent', isException && 'text-text-warning')} />}
+      {isEnvVar && <Env className='mr-1 h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />}
+      {isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />}
 
       <div
         className={cn(
-          'shrink-0 ml-0.5 truncate text-xs font-medium text-text-accent',
+          'ml-0.5 shrink-0 truncate text-xs font-medium text-text-accent',
           !notHasValue && 'max-w-[70px]',
           isException && 'text-text-warning',
         )}
@@ -91,7 +91,7 @@ const ConditionValue = ({
         {variableName}
       </div>
       <div
-        className='shrink-0 mx-1 text-xs font-medium text-text-primary'
+        className='mx-1 shrink-0 text-xs font-medium text-text-primary'
         title={operatorName}
       >
         {operatorName}

web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx

@@ -97,18 +97,18 @@ const ConditionWrap: FC<Props> = ({
                 className={cn(
                   'group relative rounded-[10px] bg-components-panel-bg',
                   willDeleteCaseId === item.case_id && 'bg-state-destructive-hover',
-                  !isSubVariable && 'py-1 px-3 min-h-[40px] ',
+                  !isSubVariable && 'min-h-[40px] px-3 py-1 ',
                   isSubVariable && 'px-1 py-2',
                 )}
               >
                 {!isSubVariable && (
                   <>
                     <RiDraggable className={cn(
-                      'hidden handle absolute top-2 left-1 w-3 h-3 text-text-quaternary cursor-pointer',
+                      'handle absolute left-1 top-2 hidden h-3 w-3 cursor-pointer text-text-quaternary',
                       casesLength > 1 && 'group-hover:block',
                     )} />
                     <div className={cn(
-                      'absolute left-4 leading-4 text-[13px] font-semibold text-text-secondary',
+                      'absolute left-4 text-[13px] font-semibold leading-4 text-text-secondary',
                       casesLength === 1 ? 'top-2.5' : 'top-1',
                     )}>
                       {
@@ -116,7 +116,7 @@ const ConditionWrap: FC<Props> = ({
                       }
                       {
                         casesLength > 1 && (
-                          <div className='text-[10px] text-text-tertiary font-medium'>CASE {index + 1}</div>
+                          <div className='text-[10px] font-medium text-text-tertiary'>CASE {index + 1}</div>
                         )
                       }
                     </div>
@@ -168,7 +168,7 @@ const ConditionWrap: FC<Props> = ({
                             size='small'
                             disabled={readOnly}
                           >
-                            <RiAddLine className='mr-1 w-3.5 h-3.5' />
+                            <RiAddLine className='mr-1 h-3.5 w-3.5' />
                             {t('workflow.nodes.ifElse.addSubVariable')}
                           </Button>
                         )}
@@ -187,7 +187,7 @@ const ConditionWrap: FC<Props> = ({
                   {
                     ((index === 0 && casesLength > 1) || (index > 0)) && (
                       <Button
-                        className='hover:text-components-button-destructive-ghost-text hover:bg-components-button-destructive-ghost-bg-hover'
+                        className='hover:bg-components-button-destructive-ghost-bg-hover hover:text-components-button-destructive-ghost-text'
                         size='small'
                         variant='ghost'
                         disabled={readOnly}
@@ -195,7 +195,7 @@ const ConditionWrap: FC<Props> = ({
                         onMouseEnter={() => setWillDeleteCaseId(item.case_id)}
                         onMouseLeave={() => setWillDeleteCaseId('')}
                       >
-                        <RiDeleteBinLine className='mr-1 w-3.5 h-3.5' />
+                        <RiDeleteBinLine className='mr-1 h-3.5 w-3.5' />
                         {t('common.operation.remove')}
                       </Button>
                     )
@@ -203,7 +203,7 @@ const ConditionWrap: FC<Props> = ({
                 </div>
               </div>
               {!isSubVariable && (
-                <div className='my-2 mx-3 h-[1px] bg-divider-subtle'></div>
+                <div className='mx-3 my-2 h-[1px] bg-divider-subtle'></div>
               )}
             </div>
           ))
@@ -215,7 +215,7 @@ const ConditionWrap: FC<Props> = ({
           disabled={readOnly}
           onClick={() => handleAddSubVariableCondition?.(caseId!, conditionId!)}
         >
-          <RiAddLine className='mr-1 w-3.5 h-3.5' />
+          <RiAddLine className='mr-1 h-3.5 w-3.5' />
           {t('workflow.nodes.ifElse.addSubVariable')}
         </Button>
       )}

web/app/components/workflow/nodes/if-else/node.tsx

@@ -37,7 +37,7 @@ const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
       return !!condition.value
     }
   }, [])
-  const conditionNotSet = (<div className='flex items-center h-6 px-1 space-x-1 text-xs font-normal text-text-secondary bg-workflow-block-parma-bg rounded-md'>
+  const conditionNotSet = (<div className='flex h-6 items-center space-x-1 rounded-md bg-workflow-block-parma-bg px-1 text-xs font-normal text-text-secondary'>
     {t(`${i18nPrefix}.conditionNotSetup`)}
   </div>)
 
@@ -46,8 +46,8 @@ const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
       {
         cases.map((caseItem, index) => (
           <div key={caseItem.case_id}>
-            <div className='relative flex items-center h-6 px-1'>
-              <div className='flex items-center justify-between w-full'>
+            <div className='relative flex h-6 items-center px-1'>
+              <div className='flex w-full items-center justify-between'>
                 <div className='text-[10px] font-semibold text-text-tertiary'>
                   {casesLength > 1 && `CASE ${index + 1}`}
                 </div>
@@ -80,7 +80,7 @@ const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
                       )
                       : conditionNotSet}
                   {i !== caseItem.conditions.length - 1 && (
-                    <div className='absolute z-10 right-1 bottom-[-10px] leading-4 text-[10px] font-medium text-text-accent uppercase'>{t(`${i18nPrefix}.${caseItem.logical_operator}`)}</div>
+                    <div className='absolute bottom-[-10px] right-1 z-10 text-[10px] font-medium uppercase leading-4 text-text-accent'>{t(`${i18nPrefix}.${caseItem.logical_operator}`)}</div>
                   )}
                 </div>
               ))}
@@ -88,8 +88,8 @@ const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
           </div>
         ))
       }
-      <div className='relative flex items-center h-6 px-1'>
-        <div className='w-full text-xs font-semibold text-right text-text-secondary'>ELSE</div>
+      <div className='relative flex h-6 items-center px-1'>
+        <div className='w-full text-right text-xs font-semibold text-text-secondary'>ELSE</div>
         <NodeSourceHandle
           {...props}
           handleId='false'

web/app/components/workflow/nodes/if-else/panel.tsx

@@ -69,16 +69,16 @@ const Panel: FC<NodePanelProps<IfElseNodeType>> = ({
           onClick={() => handleAddCase()}
           disabled={readOnly}
         >
-          <RiAddLine className='mr-1 w-4 h-4' />
+          <RiAddLine className='mr-1 h-4 w-4' />
           ELIF
         </Button>
       </div>
-      <div className='my-2 mx-3 h-[1px] bg-divider-subtle'></div>
+      <div className='mx-3 my-2 h-[1px] bg-divider-subtle'></div>
       <Field
         title={t(`${i18nPrefix}.else`)}
         className='px-4 py-2'
       >
-        <div className='leading-[18px] text-xs font-normal text-text-tertiary'>{t(`${i18nPrefix}.elseDescription`)}</div>
+        <div className='text-xs font-normal leading-[18px] text-text-tertiary'>{t(`${i18nPrefix}.elseDescription`)}</div>
       </Field>
     </div>
   )