From 1715898593f0f8945bdd9088107a4d0ecde380f6 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 14 Jun 2024 17:47:49 -0300
Subject: [PATCH] Fixed prompt modal oveflow

---
 .../src/modals/genericModal/index.tsx         | 260 +++++++++---------
 src/frontend/src/style/applies.css            |   4 +-
 2 files changed, 131 insertions(+), 133 deletions(-)

diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 250192dc9..bff50a2ef 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -83,7 +83,7 @@ export default function GenericModal({
     }
 
     const filteredWordsHighlight = matches.filter(
-      (word) => !invalid_chars.includes(word)
+      (word) => !invalid_chars.includes(word),
     );
 
     setWordsHighlight(filteredWordsHighlight);
@@ -134,7 +134,7 @@ export default function GenericModal({
         // to the first key of the custom_fields object
         if (field_name === "") {
           field_name = Array.isArray(
-            apiReturn.data?.frontend_node?.custom_fields?.[""]
+            apiReturn.data?.frontend_node?.custom_fields?.[""],
           )
             ? apiReturn.data?.frontend_node?.custom_fields?.[""][0] ?? ""
             : apiReturn.data?.frontend_node?.custom_fields?.[""] ?? "";
@@ -204,138 +204,136 @@ export default function GenericModal({
           aria-hidden="true"
         />
       </BaseModal.Header>
-      <BaseModal.Content>
-        <div className="flex h-full flex-col">
-          <div
-            className={classNames(
-              !isEdit ? "rounded-lg border" : "",
-              "flex h-full max-h-[85%] w-full"
-            )}
-          >
-            {type === TypeModal.PROMPT && isEdit && !readonly ? (
-              <Textarea
-                id={"modal-" + id}
-                data-testid={"modal-" + id}
-                ref={divRefPrompt}
-                className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
-                value={inputValue}
-                onBlur={() => {
-                  setIsEdit(false);
-                }}
-                autoFocus
-                onChange={(event) => {
-                  setInputValue(event.target.value);
-                  checkVariables(event.target.value);
-                }}
-                placeholder={EDIT_TEXT_PLACEHOLDER}
-                onKeyDown={(e) => {
-                  handleKeyDown(e, inputValue, "");
-                }}
-              />
-            ) : type === TypeModal.PROMPT && (!isEdit || readonly) ? (
-              <SanitizedHTMLWrapper
-                className={getClassByNumberLength()}
-                content={coloredContent}
-                onClick={() => {
-                  setIsEdit(true);
-                }}
-                suppressWarning={true}
-              />
-            ) : type !== TypeModal.PROMPT ? (
-              <Textarea
-                ref={textRef}
-                className="form-input h-full w-full overflow-auto rounded-lg focus-visible:ring-1"
-                value={inputValue}
-                onChange={(event) => {
-                  setInputValue(event.target.value);
-                }}
-                placeholder={EDIT_TEXT_PLACEHOLDER}
-                onKeyDown={(e) => {
-                  handleKeyDown(e, value, "");
-                }}
-                readOnly={readonly}
-                id={"text-area-modal"}
-                data-testid={"text-area-modal"}
-              />
-            ) : (
-              <></>
-            )}
-          </div>
-
-          <div className="mt-6 flex h-fit w-full items-end justify-between">
-            <div className="mb-auto flex-1">
-              {type === TypeModal.PROMPT && (
-                <div className=" mr-2">
-                  <div
-                    ref={divRef}
-                    className="max-h-20 overflow-y-auto custom-scroll"
-                  >
-                    <div className="flex flex-wrap items-center">
-                      <IconComponent
-                        name="Braces"
-                        className=" -ml-px mr-1 flex h-4 w-4 text-primary"
-                      />
-                      <span className="text-md font-semibold text-primary">
-                        Prompt Variables:
-                      </span>
-
-                      {wordsHighlight.map((word, index) => (
-                        <ShadTooltip
-                          key={index}
-                          content={word.replace(/[{}]/g, "")}
-                          asChild={false}
-                        >
-                          <Badge
-                            key={index}
-                            variant="gray"
-                            size="md"
-                            className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
-                          >
-                            <div className="relative bottom-[1px]">
-                              <span id={"badge" + index.toString()}>
-                                {word.replace(/[{}]/g, "").length > 59
-                                  ? word.replace(/[{}]/g, "").slice(0, 56) +
-                                    "..."
-                                  : word.replace(/[{}]/g, "")}
-                              </span>
-                            </div>
-                          </Badge>
-                        </ShadTooltip>
-                      ))}
-                    </div>
-                  </div>
-                  <span className="mt-2 text-xs text-muted-foreground">
-                    Prompt variables can be created with any chosen name inside
-                    curly brackets, e.g. {"{variable_name}"}
-                  </span>
-                </div>
-              )}
-            </div>
-            <Button
-              data-testid="genericModalBtnSave"
-              id="genericModalBtnSave"
-              disabled={readonly}
-              onClick={() => {
-                switch (myModalType) {
-                  case TypeModal.TEXT:
-                    setValue(inputValue);
-                    setModalOpen(false);
-                    break;
-                  case TypeModal.PROMPT:
-                    validatePrompt(false);
-                    break;
-
-                  default:
-                    break;
-                }
+      <BaseModal.Content overflowHidden>
+        <div
+          className={classNames(
+            !isEdit ? "rounded-lg border" : "",
+            "flex h-full w-full",
+          )}
+        >
+          {type === TypeModal.PROMPT && isEdit && !readonly ? (
+            <Textarea
+              id={"modal-" + id}
+              data-testid={"modal-" + id}
+              ref={divRefPrompt}
+              className="form-input h-full w-full resize-none rounded-lg custom-scroll focus-visible:ring-1"
+              value={inputValue}
+              onBlur={() => {
+                setIsEdit(false);
               }}
-              type="submit"
-            >
-              {myButtonText}
-            </Button>
-          </div>
+              autoFocus
+              onChange={(event) => {
+                setInputValue(event.target.value);
+                checkVariables(event.target.value);
+              }}
+              placeholder={EDIT_TEXT_PLACEHOLDER}
+              onKeyDown={(e) => {
+                handleKeyDown(e, inputValue, "");
+              }}
+            />
+          ) : type === TypeModal.PROMPT && (!isEdit || readonly) ? (
+            <SanitizedHTMLWrapper
+              className={getClassByNumberLength()}
+              content={coloredContent}
+              onClick={() => {
+                setIsEdit(true);
+              }}
+              suppressWarning={true}
+            />
+          ) : type !== TypeModal.PROMPT ? (
+            <Textarea
+              ref={textRef}
+              className="form-input h-full w-full resize-none overflow-auto rounded-lg focus-visible:ring-1"
+              value={inputValue}
+              onChange={(event) => {
+                setInputValue(event.target.value);
+              }}
+              placeholder={EDIT_TEXT_PLACEHOLDER}
+              onKeyDown={(e) => {
+                handleKeyDown(e, value, "");
+              }}
+              readOnly={readonly}
+              id={"text-area-modal"}
+              data-testid={"text-area-modal"}
+            />
+          ) : (
+            <></>
+          )}
         </div>
       </BaseModal.Content>
+      <BaseModal.Footer>
+        <div className="flex w-full shrink-0 items-end justify-between">
+          <div className="mb-auto flex-1">
+            {type === TypeModal.PROMPT && (
+              <div className=" mr-2">
+                <div
+                  ref={divRef}
+                  className="max-h-20 overflow-y-auto custom-scroll"
+                >
+                  <div className="flex flex-wrap items-center">
+                    <IconComponent
+                      name="Braces"
+                      className=" -ml-px mr-1 flex h-4 w-4 text-primary"
+                    />
+                    <span className="text-md font-semibold text-primary">
+                      Prompt Variables:
+                    </span>
+
+                    {wordsHighlight.map((word, index) => (
+                      <ShadTooltip
+                        key={index}
+                        content={word.replace(/[{}]/g, "")}
+                        asChild={false}
+                      >
+                        <Badge
+                          key={index}
+                          variant="gray"
+                          size="md"
+                          className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
+                        >
+                          <div className="relative bottom-[1px]">
+                            <span id={"badge" + index.toString()}>
+                              {word.replace(/[{}]/g, "").length > 59
+                                ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
+                                : word.replace(/[{}]/g, "")}
+                            </span>
+                          </div>
+                        </Badge>
+                      </ShadTooltip>
+                    ))}
+                  </div>
+                </div>
+                <span className="mt-2 text-xs text-muted-foreground">
+                  Prompt variables can be created with any chosen name inside
+                  curly brackets, e.g. {"{variable_name}"}
+                </span>
+              </div>
+            )}
+          </div>
+          <Button
+            data-testid="genericModalBtnSave"
+            id="genericModalBtnSave"
+            disabled={readonly}
+            onClick={() => {
+              switch (myModalType) {
+                case TypeModal.TEXT:
+                  setValue(inputValue);
+                  setModalOpen(false);
+                  break;
+                case TypeModal.PROMPT:
+                  validatePrompt(false);
+                  break;
+
+                default:
+                  break;
+              }
+            }}
+            type="submit"
+          >
+            {myButtonText}
+          </Button>
+        </div>
+      </BaseModal.Footer>
     </BaseModal>
   );
 }
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 8a015dd3d..6c325b47b 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -944,11 +944,11 @@
     @apply bg-white text-primary;
   }
   .code-highlight {
-    @apply block max-h-[64vh] w-full overflow-y-hidden border-0 px-3 py-2 text-sm outline-0 word-break-break-word;
+    @apply block w-full overflow-auto border-0 px-3 py-2 text-sm outline-0 word-break-break-word;
   }
 
   .code-nohighlight {
-    @apply block max-h-[70vh] w-full overflow-y-hidden border-0 px-3 py-2 text-sm outline-0 word-break-break-word;
+    @apply block w-full overflow-auto border-0 px-3 py-2 text-sm outline-0 word-break-break-word;
   }
   .form-modal-lockchat {
     @apply form-input block w-full rounded-md border-border p-4 pr-16 custom-scroll focus:border-ring focus:ring-ring sm:text-sm;