feat: Add x-large size option to baseModal and various modals resizes (#3710)

* feat: Add x-large size option to baseModal

The code changes introduce a new size option "x-large" to the baseModal component. This size option sets the minimum width to "min-w-[95vw]" and the height to "h-[95vh]". This change allows for a larger modal size when needed.

* feat: Add x-large size option to baseModal

* chore: Update CodeAreaModal to use x-large size option

* feat: Update EditNodeModal to use x-large size option

* feat: Update FlowLogsModal to use x-large size option

* chore: Update modal components to use x-large size option

* 🔧 (applies.css): Rearrange CSS classes properties for better readability and maintainability. Fix the order of properties in CSS classes to follow a consistent pattern.

src/frontend/src/modals/IOModal/index.tsx

@@ -185,12 +185,12 @@ export default function IOModal({
 
   return (
     <BaseModal
-      size={"md-thin"}
       open={open}
       setOpen={setOpen}
       disable={disable}
       type={isPlayground ? "modal" : undefined}
       onSubmit={() => sendMessage({ repeat: 1 })}
+      size="x-large"
     >
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}

src/frontend/src/modals/apiModal/index.tsx

@@ -43,7 +43,7 @@ export default function ApiModal({
   }, [open]);
 
   return (
-    <BaseModal open={open} setOpen={setOpen}>
+    <BaseModal open={open} setOpen={setOpen} size="x-large">
       <BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
       <BaseModal.Header description={EXPORT_CODE_DIALOG}>
         <span className="pr-2">API</span>

src/frontend/src/modals/baseModal/helpers/switch-case-size.ts

@@ -61,6 +61,12 @@ export const switchCaseModalSize = (size: string) => {
       minWidth = "min-w-[80vw]";
       height = "";
       break;
+
+    case "x-large":
+      minWidth = "min-w-[95vw]";
+      height = "h-[95vh]";
+      break;
+
     default:
       minWidth = "min-w-[80vw]";
       height = "h-[90vh]";

src/frontend/src/modals/baseModal/index.tsx

@@ -155,7 +155,8 @@ interface BaseModalProps {
     | "md-thin"
     | "sm-thin"
     | "smaller-h-full"
-    | "medium-log";
+    | "medium-log"
+    | "x-large";
 
   disable?: boolean;
   onChangeOpenModal?: (open?: boolean) => void;

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -185,6 +185,7 @@ export default function CodeAreaModal({
       }}
       open={open}
       setOpen={setOpen}
+      size="x-large"
     >
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       <BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>

src/frontend/src/modals/editNodeModal/index.tsx

@@ -31,7 +31,7 @@ const EditNodeModal = ({
   }, [data.node]);
 
   return (
-    <BaseModal key={data.id} open={open} setOpen={setOpen}>
+    <BaseModal key={data.id} open={open} setOpen={setOpen} size="x-large">
       <BaseModal.Trigger>
         <></>
       </BaseModal.Trigger>

src/frontend/src/modals/flowLogsModal/index.tsx

@@ -31,7 +31,7 @@ export default function FlowLogsModal({
   }, [data, open, isLoading]);
 
   return (
-    <BaseModal open={open} setOpen={setOpen} size="large">
+    <BaseModal open={open} setOpen={setOpen} size="x-large">
       <BaseModal.Header description="Inspect component executions.">
         <div className="flex w-full justify-between">
           <div className="flex h-fit w-32 items-center">

src/frontend/src/modals/promptModal/index.tsx

@@ -177,6 +177,7 @@ export default function PromptModal({
       onChangeOpenModal={(open) => {}}
       open={modalOpen}
       setOpen={setModalOpen}
+      size="x-large"
     >
       <BaseModal.Trigger disable={disabled} asChild>
         {children}

src/frontend/src/modals/textAreaModal/index.tsx

@@ -33,6 +33,7 @@ export default function ComponentTextModal({
       onChangeOpenModal={(open) => {}}
       open={modalOpen}
       setOpen={setModalOpen}
+      size="x-large"
     >
       <BaseModal.Trigger disable={disabled} asChild>
         {children}

src/frontend/src/style/applies.css

@@ -339,7 +339,7 @@
     @apply h-8 w-8 rounded;
   }
   .generic-node-tooltip-div {
-    @apply ml-2 w-full truncate flex;
+    @apply ml-2 flex w-full truncate;
   }
   .generic-node-validation-div {
     @apply max-h-96 overflow-auto;
@@ -394,7 +394,7 @@
     @apply hover:text-accent-foreground hover:transition-all;
   }
   .generic-node-desc {
-    @apply pb-4 h-full w-full px-5 text-foreground;
+    @apply h-full w-full px-5 pb-4 text-foreground;
   }
   .generic-node-desc-text {
     @apply w-full text-sm text-muted-foreground;
@@ -1081,7 +1081,7 @@
     @apply text-base text-muted-foreground;
   }
   .langflow-chat-input-div {
-    @apply flex-max-width flex-col items-center justify-between px-8 pb-6;
+    @apply flex-max-width flex-col items-center justify-between px-8 pb-3;
   }
   .langflow-chat-input {
     @apply relative w-full rounded-md shadow-sm;
@@ -1183,6 +1183,6 @@
     @apply relative bottom-3 left-1 ml-2 rounded-full bg-beta-background px-2 py-1 text-center text-xs font-semibold text-beta-foreground;
   }
   .color-option-container {
-    @apply w-fit
+    @apply w-fit;
   }
 }