From 78e656f4c0172a76dce4e6e619b53de4a801fac9 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 6 Jun 2024 16:21:15 -0300
Subject: [PATCH] Fixed Playground modal and size

---
 .../baseModal/helpers/switch-case-size.ts     |  6 +--
 src/frontend/src/modals/baseModal/index.tsx   | 38 +++++++++++--------
 2 files changed, 26 insertions(+), 18 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 a0c5f0362..c3eca22bb 100644
--- a/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts
+++ b/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts
@@ -44,17 +44,17 @@ export const switchCaseModalSize = (size: string) => {
       break;
     case "large-thin":
       minWidth = "min-w-[65vw]";
-      height = "h-[80vh]";
+      height = "h-[90vh]";
       break;
 
     case "md-thin":
       minWidth = "min-w-[85vw]";
-      height = "h-[70vh]";
+      height = "h-[90vh]";
       break;
 
     case "sm-thin":
       minWidth = "min-w-[65vw]";
-      height = "h-[70vh]";
+      height = "h-[90vh]";
       break;
 
     case "large-h-full":
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index 164c05993..d74c8d999 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -103,7 +103,7 @@ interface BaseModalProps {
     React.ReactElement<ContentProps>,
     React.ReactElement<HeaderProps>,
     React.ReactElement<TriggerProps>?,
-    React.ReactElement<FooterProps>?
+    React.ReactElement<FooterProps>?,
   ];
   open?: boolean;
   setOpen?: (open: boolean) => void;
@@ -138,16 +138,16 @@ function BaseModal({
   onSubmit,
 }: BaseModalProps) {
   const headerChild = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Header
+    (child) => (child as React.ReactElement).type === Header,
   );
   const triggerChild = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Trigger
+    (child) => (child as React.ReactElement).type === Trigger,
   );
   const ContentChild = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Content
+    (child) => (child as React.ReactElement).type === Content,
   );
   const ContentFooter = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Footer
+    (child) => (child as React.ReactElement).type === Footer,
   );
 
   let { minWidth, height } = switchCaseModalSize(size);
@@ -164,17 +164,21 @@ function BaseModal({
       {type === "modal" ? (
         <Modal open={open} onOpenChange={setOpen}>
           {triggerChild}
-          <ModalContent className={cn(minWidth, "duration-300")}>
-            <div className="truncate-doubleline word-break-break-word">
+          <ModalContent
+            className={cn(minWidth, height, "flex flex-col duration-300")}
+          >
+            <div className="flex-shrink-0 truncate-doubleline word-break-break-word">
               {headerChild}
             </div>
             <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>
             {ContentFooter && (
-              <div className="flex flex-row-reverse">{ContentFooter}</div>
+              <div className="flex flex-shrink-0 flex-row-reverse">
+                {ContentFooter}
+              </div>
             )}
           </ModalContent>
         </Modal>
@@ -184,7 +188,7 @@ function BaseModal({
           <DialogContent
             className={cn(minWidth, height, "flex flex-col duration-300")}
           >
-            <div className="truncate-doubleline word-break-break-word">
+            <div className="flex-shrink-0 truncate-doubleline word-break-break-word">
               {headerChild}
             </div>
             {onSubmit ? (
@@ -193,26 +197,30 @@ function BaseModal({
                   event.preventDefault();
                   onSubmit();
                 }}
-                className="flex flex-1 flex-col gap-6"
+                className="flex min-h-0 flex-1 flex-col gap-6"
               >
                 <div
-                  className={`flex w-full flex-1 flex-col transition-all duration-300`}
+                  className={`flex w-full flex-1 flex-col overflow-hidden transition-all duration-300`}
                 >
                   {ContentChild}
                 </div>
                 {ContentFooter && (
-                  <div className="flex flex-row-reverse">{ContentFooter}</div>
+                  <div className="flex flex-shrink-0 flex-row-reverse">
+                    {ContentFooter}
+                  </div>
                 )}
               </Form.Root>
             ) : (
               <>
                 <div
-                  className={`flex w-full flex-1 flex-col transition-all duration-300`}
+                  className={`flex min-h-0 w-full flex-1 flex-col transition-all duration-300`}
                 >
                   {ContentChild}
                 </div>
                 {ContentFooter && (
-                  <div className="flex flex-row-reverse">{ContentFooter}</div>
+                  <div className="flex flex-shrink-0 flex-row-reverse">
+                    {ContentFooter}
+                  </div>
                 )}
               </>
             )}