From ab3a651e9a5472a96d12b6a859a04f79a83d66fe Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 5 Jun 2024 17:31:04 -0300
Subject: [PATCH] Fixed modal height to consider the entire modal when height
 is relative

---
 .../baseModal/helpers/switch-case-size.ts     | 17 ++++----
 src/frontend/src/modals/baseModal/index.tsx   | 11 ++++--
 .../src/modals/editNodeModal/index.tsx        | 39 +++++++++----------
 3 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts b/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts
index 35004c2ec..a0c5f0362 100644
--- a/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts
+++ b/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts
@@ -4,7 +4,7 @@ export const switchCaseModalSize = (size: string) => {
   switch (size) {
     case "x-small":
       minWidth = "min-w-[20vw]";
-      height = "h-full";
+      height = "";
       break;
     case "smaller":
       minWidth = "min-w-[40vw]";
@@ -12,7 +12,7 @@ export const switchCaseModalSize = (size: string) => {
       break;
     case "smaller-h-full":
       minWidth = "min-w-[40vw]";
-      height = "h-full";
+      height = "";
       break;
     case "small":
       minWidth = "min-w-[40vw]";
@@ -20,16 +20,19 @@ export const switchCaseModalSize = (size: string) => {
       break;
     case "small-h-full":
       minWidth = "min-w-[40vw]";
-      height = "h-full";
+      height = "";
       break;
     case "medium":
       minWidth = "min-w-[60vw]";
       height = "h-[60vh]";
       break;
+    case "medium-tall":
+      minWidth = "min-w-[60vw]";
+      height = "h-[90vh]";
+      break;
     case "medium-h-full":
       minWidth = "min-w-[60vw]";
-      height = "h-full";
-
+      height = "";
       break;
     case "large":
       minWidth = "min-w-[85vw]";
@@ -56,11 +59,11 @@ export const switchCaseModalSize = (size: string) => {
 
     case "large-h-full":
       minWidth = "min-w-[80vw]";
-      height = "h-full";
+      height = "";
       break;
     default:
       minWidth = "min-w-[80vw]";
-      height = "h-[80vh]";
+      height = "h-[90vh]";
       break;
   }
   return { minWidth, height };
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index b2c4e755e..314ad1066 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -112,6 +112,7 @@ interface BaseModalProps {
     | "smaller"
     | "small"
     | "medium"
+    | "medium-tall"
     | "large"
     | "three-cards"
     | "large-thin"
@@ -180,7 +181,9 @@ function BaseModal({
       ) : (
         <Dialog open={open} onOpenChange={setOpen}>
           {triggerChild}
-          <DialogContent className={cn(minWidth, "duration-300")}>
+          <DialogContent
+            className={cn(minWidth, height, "flex flex-col duration-300")}
+          >
             <div className="truncate-doubleline word-break-break-word">
               {headerChild}
             </div>
@@ -190,10 +193,10 @@ function BaseModal({
                   event.preventDefault();
                   onSubmit();
                 }}
-                className="flex flex-col gap-6"
+                className="flex flex-1 flex-col gap-6"
               >
                 <div
-                  className={`flex flex-col ${height} w-full transition-all duration-300`}
+                  className={`flex w-full flex-1 flex-col transition-all duration-300`}
                 >
                   {ContentChild}
                 </div>
@@ -204,7 +207,7 @@ function BaseModal({
             ) : (
               <>
                 <div
-                  className={`flex flex-col ${height} w-full transition-all duration-300`}
+                  className={`flex w-full flex-1 flex-col transition-all duration-300`}
                 >
                   {ContentChild}
                 </div>
diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx
index 3e60a39d7..15b929f3f 100644
--- a/src/frontend/src/modals/editNodeModal/index.tsx
+++ b/src/frontend/src/modals/editNodeModal/index.tsx
@@ -60,7 +60,7 @@ const EditNodeModal = forwardRef(
     return (
       <BaseModal
         key={data.id}
-        size="large-h-full"
+        size="medium-tall"
         open={open}
         setOpen={setOpen}
         onChangeOpenModal={(open) => {
@@ -85,27 +85,24 @@ const EditNodeModal = forwardRef(
           <Badge variant="secondary">ID: {myData.current.id}</Badge>
         </BaseModal.Header>
         <BaseModal.Content>
-          <div className="flex pb-2">
-            <IconComponent
-              name="Variable"
-              className="edit-node-modal-variable "
-            />
-            <span className="edit-node-modal-span">Parameters</span>
-          </div>
+          <div className="flex h-full flex-col">
+            <div className="flex pb-2">
+              <IconComponent
+                name="Variable"
+                className="edit-node-modal-variable "
+              />
+              <span className="edit-node-modal-span">Parameters</span>
+            </div>
 
-          <div className="w-full">
-            {nodeLength > 0 && (
-              <div className="edit-node-modal-table">
-                <div className="h-96">
-                  <TableComponent
-                    tooltipShowMode="whenTruncated"
-                    tooltipShowDelay={0.5}
-                    columnDefs={columnDefs}
-                    rowData={rowData}
-                  />
-                </div>
-              </div>
-            )}
+            <div className="h-full">
+              {nodeLength > 0 && (
+                <TableComponent
+                  tooltipShowDelay={0.5}
+                  columnDefs={columnDefs}
+                  rowData={rowData}
+                />
+              )}
+            </div>
           </div>
         </BaseModal.Content>