From f390d3a4e9dfa0b74f90f78ff40d2ce3ef722e6d Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Tue, 8 Jul 2025 20:12:16 -0300
Subject: [PATCH] fix: Improve modal layout responsiveness and overflow
 handling (#8936)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ (switch-case-size.ts): Update modal sizes for better user experience and consistency
✨ (index.tsx, TemplateGetStartedCardComponent): Adjust styles for better layout and responsiveness
✨ (index.tsx): Improve modal layout and scrolling behavior for better usability
---
 src/frontend/src/modals/baseModal/helpers/switch-case-size.ts | 2 +-
 .../templatesModal/components/GetStartedComponent/index.tsx   | 2 +-
 .../components/TemplateGetStartedCardComponent/index.tsx      | 2 +-
 src/frontend/src/modals/templatesModal/index.tsx              | 4 ++--
 4 files changed, 5 insertions(+), 5 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 bd2eb9e6e..25893898e 100644
--- a/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts
+++ b/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts
@@ -57,7 +57,7 @@ export const switchCaseModalSize = (size: string) => {
     case "templates":
       minWidth = "w-[97vw] max-w-[1200px]";
       height =
-        "min-h-[700px] lg:min-h-0 h-[90vh] md:h-[80vh] lg:h-[50vw] lg:max-h-[620px]";
+        "min-h-[500px] h-[90vh] md:h-[85vh] lg:h-[80vh] xl:h-[70vh] max-h-[90vh]";
       break;
     case "three-cards":
       minWidth = "min-w-[1066px]";
diff --git a/src/frontend/src/modals/templatesModal/components/GetStartedComponent/index.tsx b/src/frontend/src/modals/templatesModal/components/GetStartedComponent/index.tsx
index 8ac728470..65314df70 100644
--- a/src/frontend/src/modals/templatesModal/components/GetStartedComponent/index.tsx
+++ b/src/frontend/src/modals/templatesModal/components/GetStartedComponent/index.tsx
@@ -43,7 +43,7 @@ export default function GetStartedComponent() {
       <BaseModal.Header description="Start with templates showcasing Langflow's Prompting, RAG, and Agent use cases.">
         Get started
       </BaseModal.Header>
-      <div className="grid flex-1 grid-cols-1 gap-4 lg:grid-cols-3">
+      <div className="grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-3">
         {cardData.map((card, index) => (
           <TemplateGetStartedCardComponent key={index} {...card} />
         ))}
diff --git a/src/frontend/src/modals/templatesModal/components/TemplateGetStartedCardComponent/index.tsx b/src/frontend/src/modals/templatesModal/components/TemplateGetStartedCardComponent/index.tsx
index 1bd07f928..597a67a05 100644
--- a/src/frontend/src/modals/templatesModal/components/TemplateGetStartedCardComponent/index.tsx
+++ b/src/frontend/src/modals/templatesModal/components/TemplateGetStartedCardComponent/index.tsx
@@ -42,7 +42,7 @@ export default function TemplateGetStartedCardComponent({
 
   return flow ? (
     <div
-      className="group relative flex h-full w-full cursor-pointer flex-col overflow-hidden rounded-3xl border focus-visible:border-ring"
+      className="group relative flex h-full min-h-[200px] w-full cursor-pointer flex-col overflow-hidden rounded-3xl border focus-visible:border-ring md:min-h-[250px]"
       tabIndex={1}
       onKeyDown={handleKeyDown}
       onClick={handleClick}
diff --git a/src/frontend/src/modals/templatesModal/index.tsx b/src/frontend/src/modals/templatesModal/index.tsx
index e7d577843..b7137921e 100644
--- a/src/frontend/src/modals/templatesModal/index.tsx
+++ b/src/frontend/src/modals/templatesModal/index.tsx
@@ -59,7 +59,7 @@ export default function TemplatesModal({
 
   return (
     <BaseModal size="templates" open={open} setOpen={setOpen} className="p-0">
-      <BaseModal.Content overflowHidden className="flex flex-col p-0">
+      <BaseModal.Content className="flex flex-col p-0">
         <div className="flex h-full">
           <SidebarProvider width="15rem" defaultOpen={false}>
             <Nav
@@ -67,7 +67,7 @@ export default function TemplatesModal({
               currentTab={currentTab}
               setCurrentTab={setCurrentTab}
             />
-            <main className="flex flex-1 flex-col gap-4 overflow-hidden p-6 md:gap-8">
+            <main className="flex flex-1 flex-col gap-4 overflow-auto p-6 md:gap-8">
               {currentTab === "get-started" ? (
                 <GetStartedComponent />
               ) : (