chore: improve reference variable picker user experience (#3517)

web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx

@@ -208,18 +208,24 @@ const VarReferenceVars: FC<Props> = ({
   const filteredVars = vars.filter((v) => {
     const children = v.vars.filter(v => checkKeys([v.variable], false).isValid || v.variable.startsWith('sys.'))
     return children.length > 0
-  }).filter((v) => {
+  }).filter((node) => {
     if (!searchText)
-      return v
-    const children = v.vars.filter(v => v.variable.toLowerCase().includes(searchText.toLowerCase()))
+      return node
+    const children = node.vars.filter((v) => {
+      const searchTextLower = searchText.toLowerCase()
+      return v.variable.toLowerCase().includes(searchTextLower) || node.title.toLowerCase().includes(searchTextLower)
+    })
     return children.length > 0
-  }).map((v) => {
-    let vars = v.vars.filter(v => checkKeys([v.variable], false).isValid || v.variable.startsWith('sys.'))
-    if (searchText)
-      vars = vars.filter(v => v.variable.toLowerCase().includes(searchText.toLowerCase()))
+  }).map((node) => {
+    let vars = node.vars.filter(v => checkKeys([v.variable], false).isValid || v.variable.startsWith('sys.'))
+    if (searchText) {
+      const searchTextLower = searchText.toLowerCase()
+      if (!node.title.toLowerCase().includes(searchTextLower))
+        vars = vars.filter(v => v.variable.toLowerCase().includes(searchText.toLowerCase()))
+    }
 
     return {
-      ...v,
+      ...node,
       vars,
     }
   })
@@ -266,7 +272,7 @@ const VarReferenceVars: FC<Props> = ({
       }
 
       {filteredVars.length > 0
-        ? <div>
+        ? <div className='max-h-[85vh] overflow-y-auto'>
 
           {
             filteredVars.map((item, i) => (