🔧 chore(constants.tsx): add constant MAX_WORDS_HIGHLIGHT with a value of 110 for the maximum number of words to highlight in tooltips

🔧 chore(index.css): add CSS class .code-nohighlight with different max-height value for tooltips with fewer words to display
🔧 chore(genericModal/index.tsx): add logic to dynamically apply CSS class .code-nohighlight to tooltips with fewer words to display

src/frontend/src/constants.tsx

@@ -11,6 +11,12 @@ import { buildInputs, buildTweaks } from "./utils";
  */
 export const MAX_LENGTH_TO_SCROLL_TOOLTIP = 200;
 
+/**
+ * Number maximum of components to scroll on tooltips
+ * @constant
+ */
+export const MAX_WORDS_HIGHLIGHT = 110;
+
 /**
  * The base text for subtitle of Export Dialog (Toolbar)
  * @constant

src/frontend/src/index.css

@@ -935,6 +935,10 @@ The cursor: default; property value restores the browser's default cursor style
   .code-highlight{
     @apply block px-3 py-2 w-full max-h-[64vh] text-sm outline-0 border-0 break-all overflow-y-hidden
   }
+
+  .code-nohighlight{
+    @apply block px-3 py-2 w-full max-h-[70vh] text-sm outline-0 border-0 break-all overflow-y-hidden
+  }
   .form-modal-lockchat {
     @apply form-input focus:ring-ring focus:border-ring block w-full rounded-md border-border p-4 pr-16 custom-scroll sm:text-sm
   }

src/frontend/src/modals/genericModal/index.tsx

@@ -6,7 +6,7 @@ import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import { DialogTitle } from "../../components/ui/dialog";
 import { Textarea } from "../../components/ui/textarea";
-import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
+import { MAX_WORDS_HIGHLIGHT, PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
 import { darkContext } from "../../contexts/darkContext";
 import { PopUpContext } from "../../contexts/popUpContext";
@@ -110,7 +110,7 @@ export default function GenericModal({
   const TextAreaContentView = () => {
     return (
       <SanitizedHTMLWrapper
-        className={"code-highlight"}
+        className={getClassByNumberLength()}
         content={coloredContent}
         onClick={() => {
           setIsEdit(true);
@@ -120,6 +120,16 @@ export default function GenericModal({
     );
   };
 
+  function getClassByNumberLength(){
+    let sumOfCaracteres: number = 0;
+    wordsHighlight.forEach(element => {
+      sumOfCaracteres = sumOfCaracteres + element.replace(/[{}]/g, "").length
+    });
+    console.log(sumOfCaracteres);
+    
+    return sumOfCaracteres > MAX_WORDS_HIGHLIGHT ? "code-highlight" : "code-nohighlight"
+  }
+
 
   function validatePrompt(closeModal: boolean) {
     postValidatePrompt(field_name, inputValue, nodeClass)