Fixed modal height to consider the entire modal when height is relative

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 };

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>

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">
+          <div className="flex h-full flex-col">
-            <IconComponent
+            <div className="flex pb-2">
-              name="Variable"
+              <IconComponent
-              className="edit-node-modal-variable "
+                name="Variable"
-            />
+                className="edit-node-modal-variable "
-            <span className="edit-node-modal-span">Parameters</span>
+              />
-          </div>
+              <span className="edit-node-modal-span">Parameters</span>
+            </div>
 
-          <div className="w-full">
+            <div className="h-full">
-            {nodeLength > 0 && (
+              {nodeLength > 0 && (
-              <div className="edit-node-modal-table">
+                <TableComponent
-                <div className="h-96">
+                  tooltipShowDelay={0.5}
-                  <TableComponent
+                  columnDefs={columnDefs}
-                    tooltipShowMode="whenTruncated"
+                  rowData={rowData}
-                    tooltipShowDelay={0.5}
+                />
-                    columnDefs={columnDefs}
+              )}
-                    rowData={rowData}
+            </div>
-                  />
-                </div>
-              </div>
-            )}
           </div>
         </BaseModal.Content>