diff --git a/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.helpers.spec.ts b/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.helpers.spec.ts
index 7cef3ddde4..6b9ec7a642 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.helpers.spec.ts
+++ b/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.helpers.spec.ts
@@ -182,6 +182,16 @@ describe('var-reference-picker.helpers', () => {
       maxVarNameWidth: expect.any(Number),
     })
 
+    expect(getWidthAllocations(240, '', 'sys.user_id', 'String')).toEqual({
+      maxNodeNameWidth: 0,
+      maxTypeWidth: 64,
+      maxVarNameWidth: 119,
+    })
+
+    expect(getWidthAllocations(240, 'User Input', 'aa', 'String')).toMatchObject({
+      maxVarNameWidth: 16,
+    })
+
     expect(getTooltipContent(true, true, true)).toBe('full-path')
     expect(getTooltipContent(true, false, false)).toBe('invalid-variable')
     expect(getTooltipContent(false, false, true)).toBeNull()
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.helpers.ts b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.helpers.ts
index 6cdcb916e6..f29e99cc37 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.helpers.ts
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.helpers.ts
@@ -168,11 +168,15 @@ export const getWidthAllocations = (
 ) => {
   const availableWidth = triggerWidth - 56
   const totalTextLength = (nodeTitle + varName + type).length || 1
-  const priorityWidth = 15
+  const priorityWidth = nodeTitle ? 15 : 0
+  const minVarNameWidth = varName ? 16 : 0
   return {
     maxNodeNameWidth: priorityWidth + Math.floor(nodeTitle.length / totalTextLength * availableWidth),
     maxTypeWidth: Math.floor(type.length / totalTextLength * availableWidth),
-    maxVarNameWidth: -priorityWidth + Math.floor(varName.length / totalTextLength * availableWidth),
+    maxVarNameWidth: Math.max(
+      minVarNameWidth,
+      -priorityWidth + Math.floor(varName.length / totalTextLength * availableWidth),
+    ),
   }
 }
 
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
index 7e99988ae8..c2645ee870 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -279,13 +279,15 @@ const VarReferencePicker: FC<Props> = ({
     [outputVarNode?.type, varName],
   )
   const showErrorIcon = hasValue && !isValidVar
+  const shouldShowNodeName = isShowNodeName && !isEnv && !isChatVar && !isGlobal && !isRagVar
+  const visibleNodeTitle = shouldShowNodeName ? outputVarNode?.title || '' : ''
 
   // 8(left/right-padding) + 14(icon) + 4 + 14 + 2 = 42 + 17 buff
   const {
     maxNodeNameWidth,
     maxTypeWidth,
     maxVarNameWidth,
-  } = getWidthAllocations(triggerWidth, outputVarNode?.title || '', varName || '', type || '')
+  } = getWidthAllocations(triggerWidth, visibleNodeTitle, varName || '', type || '')
 
   const hoverPopup = useMemo<HoverPopup | null>(() => {
     const tooltipType = getTooltipContent(hasValue, isShowAPart, isValidVar)
@@ -380,7 +382,7 @@ const VarReferencePicker: FC<Props> = ({
             isJustShowValue={isJustShowValue}
             isLoading={isLoading}
             isShowAPart={isShowAPart}
-            isShowNodeName={isShowNodeName && !isEnv && !isChatVar && !isGlobal && !isRagVar}
+            isShowNodeName={shouldShowNodeName}
             isSupportConstantValue={isSupportConstantValue}
             maxNodeNameWidth={maxNodeNameWidth}
             maxTypeWidth={maxTypeWidth}