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,