🐛 fix(parameterComponent): add refNumberComponents to keep track of the number of components

🐛 fix(parameterComponent): change text-destructive class to text-status-red for better semantics
🐛 fix(ModalField): change text-destructive class to text-status-red for better semantics
🐛 fix(codeAreaModal): change text-destructive class to text-status-red for better semantics

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -41,6 +41,7 @@ export default function ParameterComponent({
 }: ParameterComponentType) {
   const ref = useRef(null);
   const refHtml = useRef(null);
+  const refNumberComponents = useRef(0);
   const infoHtml = useRef(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
@@ -91,9 +92,12 @@ export default function ParameterComponent({
     );
   }, [info]);
 
+
   useEffect(() => {
     const groupedObj = groupByFamily(myData, tooltipTitle, left, data.type);
 
+    refNumberComponents.current = groupedObj[0]?.component?.length;
+
     refHtml.current = groupedObj.map((item, i) => {
       const Icon: any = nodeIconsLucide[item.family];
 
@@ -155,7 +159,7 @@ export default function ParameterComponent({
           }
         >
           {title}
-          <span className="text-destructive">{required ? " *" : ""}</span>
+          <span className="text-status-red">{required ? " *" : ""}</span>
           <div className="">
             {info !== "" && (
               <ShadTooltip content={infoHtml.current}>
@@ -176,7 +180,7 @@ export default function ParameterComponent({
           <></>
         ) : (
           <ShadTooltip
-            style="tooltip-fixed-width custom-scroll"
+            style={refNumberComponents.current > 10 ? "tooltip-fixed-width custom-scroll overflow-y-scroll nowheel" : "tooltip-fixed-width"}
             delayDuration={0}
             content={refHtml.current}
             side={left ? "left" : "right"}

src/frontend/src/modals/NodeModal/components/ModalField/index.tsx

@@ -52,7 +52,7 @@ export default function ModalField({
       {display && (
         <div>
           <span className="mx-2">{title}</span>
-          <span className="text-destructive">{required ? " *" : ""}</span>
+          <span className="text-status-red">{required ? " *" : ""}</span>
         </div>
       )}
 

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -129,7 +129,7 @@ export default function CodeAreaModal({
             }
           >
             <div className="mt-1 h-full w-full overflow-x-clip overflow-y-scroll text-left custom-scroll">
-              <h1 className="text-lg text-destructive">
+              <h1 className="text-lg text-status-red">
                 {error?.detail?.error}
               </h1>
               <div className="ml-2 w-full break-all text-sm text-status-red">