diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
index 15b07ded17..0cadf9f95f 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
@@ -133,11 +133,10 @@ const ComponentPicker = ({
             // See https://github.com/facebook/lexical/blob/ac97dfa9e14a73ea2d6934ff566282d7f758e8bb/packages/lexical-react/src/shared/LexicalMenu.ts#L493
             <div className='w-0 h-0'>
               <div
-                className='p-1 w-[260px] bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg overflow-y-auto overflow-x-hidden'
+                className='p-1 w-[260px] bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg'
                 style={{
                   ...floatingStyles,
                   visibility: isPositioned ? 'visible' : 'hidden',
-                  maxHeight: 'calc(1 / 3 * 100vh)',
                 }}
                 ref={refs.setFloating}
               >
@@ -178,6 +177,7 @@ const ComponentPicker = ({
                           onChange={(variables: string[]) => {
                             handleSelectWorkflowVariable(variables)
                           }}
+                          maxHeightClass='max-h-[34vh]'
                         />
                       </div>
                     </>
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index 2f2371ce52..ab71c959d5 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -219,6 +219,7 @@ type Props = {
   vars: NodeOutPutVar[]
   onChange: (value: ValueSelector, item: Var) => void
   itemWidth?: number
+  maxHeightClass?: string
 }
 const VarReferenceVars: FC<Props> = ({
   hideSearch,
@@ -226,6 +227,7 @@ const VarReferenceVars: FC<Props> = ({
   vars,
   onChange,
   itemWidth,
+  maxHeightClass,
 }) => {
   const { t } = useTranslation()
   const [searchText, setSearchText] = useState('')
@@ -279,7 +281,7 @@ const VarReferenceVars: FC<Props> = ({
       }
 
       {filteredVars.length > 0
-        ? <div className='max-h-[85vh] overflow-y-auto'>
+        ? <div className={cn('max-h-[85vh] overflow-y-auto', maxHeightClass)}>
 
           {
             filteredVars.map((item, i) => (