diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
index 0c19b9611..0890b25a1 100644
--- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
+++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
@@ -12,7 +12,15 @@ import PromptAreaComponent from "../../../../components/promptComponent";
import CodeAreaComponent from "../../../../components/codeAreaComponent";
import { classNames } from "../../../../utils";
-export default function ModalField({ data, title, required, id, name, type }) {
+export default function ModalField({
+ data,
+ title,
+ required,
+ id,
+ name,
+ type,
+ index,
+}) {
const { save } = useContext(TabsContext);
const [enabled, setEnabled] = useState(
data.node.template[name]?.value ?? false
@@ -30,7 +38,17 @@ export default function ModalField({ data, title, required, id, name, type }) {
+ t.charAt(0) !== "_" &&
+ data.node.template[t].advanced &&
+ data.node.template[t].show
+ ).length -
+ 1 ===
+ index
+ ? "pb-4"
+ : ""
)}
>
{display && (
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 57c5a56e3..b44dd5bf3 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -3,7 +3,14 @@ import { XMarkIcon } from "@heroicons/react/24/outline";
import { Fragment, useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import { NodeDataType } from "../../types/flow";
-import { nodeColors, nodeIcons, toNormalCase, toTitleCase } from "../../utils";
+import {
+ classNames,
+ limitScrollFieldsModal,
+ nodeColors,
+ nodeIcons,
+ toNormalCase,
+ toTitleCase,
+} from "../../utils";
import { typesContext } from "../../contexts/typesContext";
import ModalField from "./components/ModalField";
@@ -84,8 +91,20 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
-
-
+
+
+ t.charAt(0) !== "_" &&
+ data.node.template[t].advanced &&
+ data.node.template[t].show
+ ).length > limitScrollFieldsModal
+ ? "overflow-scroll overflow-x-hidden custom-scroll"
+ : "overflow-hidden"
+ )}
+ >
{Object.keys(data.node.template)
.filter(
@@ -116,6 +135,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
}
name={t}
type={data.node.template[t].type}
+ index={idx}
/>
);
})}
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 2c2732962..f38813458 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -26,6 +26,8 @@ export function classNames(...classes: Array) {
return classes.filter(Boolean).join(" ");
}
+export const limitScrollFieldsModal = 7;
+
export enum TypeModal {
TEXT = 1,
PROMPT = 2,