Adding scrollbar on overflow itens modal (#400)

Description:
This pull request proposes the addition of a scrollbar to the modal
window containing advanced settings when the number of input fields
exceeds the limit of the screen. This enhancement aims to improve user
experience by providing a convenient way to access all settings, even
when the available screen space is limited.
The number of inputs in the screen is limited by a variable on Utils
that can be easily changed in the future if It's needed.

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 }) {
     <div
       className={classNames(
         "flex flex-row w-full items-center justify-between",
-        display ? "" : "hidden"
+        display ? "" : "hidden",
+        Object.keys(data.node.template).filter(
+          (t) =>
+            t.charAt(0) !== "_" &&
+            data.node.template[t].advanced &&
+            data.node.template[t].show
+        ).length -
+          1 ===
+          index
+          ? "pb-4"
+          : ""
       )}
     >
       {display && (

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 }) {
                     </div>
                   </div>
                   <div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
-                    <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 sm:p-4  w-full rounded-lg bg-white dark:bg-gray-800 shadow">
+                    <div className="flex w-full h-[445px]">
+                      <div
+                        className={classNames(
+                          "px-4 sm:p-4 w-full rounded-lg bg-white dark:bg-gray-800 shadow",
+                          Object.keys(data.node.template).filter(
+                            (t) =>
+                              t.charAt(0) !== "_" &&
+                              data.node.template[t].advanced &&
+                              data.node.template[t].show
+                          ).length > limitScrollFieldsModal
+                            ? "overflow-scroll overflow-x-hidden custom-scroll"
+                            : "overflow-hidden"
+                        )}
+                      >
                         <div className="flex flex-col h-full gap-5">
                           {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}
                                 />
                               );
                             })}

src/frontend/src/utils.ts

@@ -26,6 +26,8 @@ export function classNames(...classes: Array<string>) {
   return classes.filter(Boolean).join(" ");
 }
 
+export const limitScrollFieldsModal = 7;
+
 export enum TypeModal {
   TEXT = 1,
   PROMPT = 2,