diff --git a/web/app/components/rag-pipeline/components/input-field/field-list/field-item.tsx b/web/app/components/rag-pipeline/components/input-field/field-list/field-item.tsx
index 9de9341c77..8faa5abdd5 100644
--- a/web/app/components/rag-pipeline/components/input-field/field-list/field-item.tsx
+++ b/web/app/components/rag-pipeline/components/input-field/field-list/field-item.tsx
@@ -34,10 +34,10 @@ const FieldItem = ({
 
   return (
     <div
-      // ref={ref}
+      ref={ref}
       className={cn(
         'flex h-8 cursor-pointer items-center justify-between gap-x-1 rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg py-1 pl-2 shadow-xs hover:shadow-sm',
-        (!isHovering || readonly) ? 'pr-2.5' : !readonly && 'pr-1',
+        (isHovering && !readonly) ? 'pr-1' : 'pr-2.5',
       )}
     >
       <div className='flex grow basis-0 items-center gap-x-1'>
@@ -64,16 +64,8 @@ const FieldItem = ({
           </>
         )}
       </div>
-      {(!isHovering || readonly)
+      {(isHovering && !readonly)
         ? (
-          <div className='flex shrink-0 items-center gap-x-2'>
-            {payload.required && (
-              <Badge>{t('workflow.nodes.start.required')}</Badge>
-            )}
-            <InputVarTypeIcon type={payload.type as unknown as InputVarType} className='h-3 w-3 text-text-tertiary' />
-          </div>
-        )
-        : (!readonly && (
           <div className='flex shrink-0 items-center gap-x-1'>
             <button
               type='button'
@@ -89,7 +81,15 @@ const FieldItem = ({
               <RiDeleteBinLine className='size-4 text-text-tertiary group-hover:text-text-destructive' />
             </button>
           </div>
-        ))
+        )
+        : (
+          <div className='flex shrink-0 items-center gap-x-2'>
+            {payload.required && (
+              <Badge>{t('workflow.nodes.start.required')}</Badge>
+            )}
+            <InputVarTypeIcon type={payload.type as unknown as InputVarType} className='h-3 w-3 text-text-tertiary' />
+          </div>
+        )
       }
     </div>
   )
diff --git a/web/app/components/rag-pipeline/hooks/use-pipeline-init.ts b/web/app/components/rag-pipeline/hooks/use-pipeline-init.ts
index 5ba0c4b601..7bd4697a1d 100644
--- a/web/app/components/rag-pipeline/hooks/use-pipeline-init.ts
+++ b/web/app/components/rag-pipeline/hooks/use-pipeline-init.ts
@@ -46,9 +46,9 @@ export const usePipelineInit = () => {
       setDraftUpdatedAt(res.updated_at)
       setToolPublished(res.tool_published)
       setEnvSecrets((res.environment_variables || []).filter(env => env.value_type === 'secret').reduce((acc, env) => {
-          acc[env.id] = env.value
-          return acc
-        }, {} as Record<string, string>))
+        acc[env.id] = env.value
+        return acc
+      }, {} as Record<string, string>))
       setEnvironmentVariables(res.environment_variables?.map(env => env.value_type === 'secret' ? { ...env, value: '[__HIDDEN__]' } : env) || [])
       setSyncWorkflowDraftHash(res.hash)
       setRagPipelineVariables?.(res.rag_pipeline_variables || [])