From e3bf73c0e32f36f60fbb8d8d566c88bb517c5ff5 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 12 Jun 2025 10:15:40 +0800
Subject: [PATCH] fix z-index

---
 .../_base/components/variable/var-reference-picker.tsx     | 1 +
 .../_base/components/variable/var-reference-popup.tsx      | 3 +++
 .../nodes/_base/components/variable/var-reference-vars.tsx | 7 ++++++-
 3 files changed, 10 insertions(+), 1 deletion(-)

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 789da34f9d..9007aa80df 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
@@ -437,6 +437,7 @@ const VarReferencePicker: FC<Props> = ({
               onChange={handleVarReferenceChange}
               itemWidth={isAddBtnTrigger ? 260 : (minWidth || triggerWidth)}
               isSupportFileVar={isSupportFileVar}
+              zIndex={zIndex}
             />
           )}
         </PortalToFollowElemContent>
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
index e35977ae31..a8b52f8a4e 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
@@ -15,6 +15,7 @@ type Props = {
   onChange: (value: ValueSelector, varDetail: Var) => void
   itemWidth?: number
   isSupportFileVar?: boolean
+  zIndex?: number
 }
 const VarReferencePopup: FC<Props> = ({
   vars,
@@ -22,6 +23,7 @@ const VarReferencePopup: FC<Props> = ({
   onChange,
   itemWidth,
   isSupportFileVar = true,
+  zIndex,
 }) => {
   const { t } = useTranslation()
   const { locale } = useContext(I18n)
@@ -57,6 +59,7 @@ const VarReferencePopup: FC<Props> = ({
           onChange={onChange}
           itemWidth={itemWidth}
           isSupportFileVar={isSupportFileVar}
+          zIndex={zIndex}
         />
       }
     </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 023916ec5b..7cc2171029 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
@@ -46,6 +46,7 @@ type ItemProps = {
   isSupportFileVar?: boolean
   isException?: boolean
   isLoopVar?: boolean
+  zIndex?: number
 }
 
 const objVarTypes = [VarType.object, VarType.file]
@@ -60,6 +61,7 @@ const Item: FC<ItemProps> = ({
   isSupportFileVar,
   isException,
   isLoopVar,
+  zIndex,
 }) => {
   const isStructureOutput = itemData.type === VarType.object && (itemData.children as StructuredOutput)?.schema?.properties
   const isFile = itemData.type === VarType.file && !isStructureOutput
@@ -171,7 +173,7 @@ const Item: FC<ItemProps> = ({
         </div >
       </PortalToFollowElemTrigger >
       <PortalToFollowElemContent style={{
-        zIndex: 100,
+        zIndex: zIndex || 100,
       }}>
         {(isStructureOutput || isObj) && (
           <PickerStructurePanel
@@ -260,6 +262,7 @@ type Props = {
   maxHeightClass?: string
   onClose?: () => void
   onBlur?: () => void
+  zIndex?: number
 }
 const VarReferenceVars: FC<Props> = ({
   hideSearch,
@@ -271,6 +274,7 @@ const VarReferenceVars: FC<Props> = ({
   maxHeightClass,
   onClose,
   onBlur,
+  zIndex,
 }) => {
   const { t } = useTranslation()
   const [searchText, setSearchText] = useState('')
@@ -355,6 +359,7 @@ const VarReferenceVars: FC<Props> = ({
                     isSupportFileVar={isSupportFileVar}
                     isException={v.isException}
                     isLoopVar={item.isLoop}
+                    zIndex={zIndex}
                   />
                 ))}
               </div>))