From 424118be7bb1a55a5531b6457c2c4a7e1fda8653 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Tue, 16 Jul 2024 16:40:32 -0300
Subject: [PATCH] feat: add vertical scrolling capability to starter examples
 (#2739)

* Fixed vertical size of newFlowModal

* Added vertical scroll options to newFlowModal and added wrapper to look nice
---
 .../baseModal/helpers/switch-case-size.ts     |  2 +-
 .../src/modals/newFlowModal/index.tsx         | 78 ++++++++++---------
 2 files changed, 42 insertions(+), 38 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 c3eca22bb..e2505a495 100644
--- a/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts
+++ b/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts
@@ -40,7 +40,7 @@ export const switchCaseModalSize = (size: string) => {
       break;
     case "three-cards":
       minWidth = "min-w-[1066px]";
-      height = "h-fit";
+      height = "max-h-[94vh]";
       break;
     case "large-thin":
       minWidth = "min-w-[65vw]";
diff --git a/src/frontend/src/modals/newFlowModal/index.tsx b/src/frontend/src/modals/newFlowModal/index.tsx
index 295ecd395..6209ddc36 100644
--- a/src/frontend/src/modals/newFlowModal/index.tsx
+++ b/src/frontend/src/modals/newFlowModal/index.tsx
@@ -17,44 +17,48 @@ export default function NewFlowModal({
           Get Started
         </span>
       </BaseModal.Header>
-      <BaseModal.Content>
-        <div className="mb-5 grid h-fit w-full grid-cols-3 gap-4 overflow-auto pb-6 custom-scroll">
-          <NewFlowCardComponent />
+      <BaseModal.Content overflowHidden>
+        <div className="overflow-y-auto rounded-md border bg-muted p-4">
+          <div className="grid w-full grid-cols-3 gap-4">
+            <NewFlowCardComponent />
 
-          {examples.find((e) => e.name == "Basic Prompting (Hello, World)") && (
-            <UndrawCardComponent
-              key={0}
-              flow={
-                examples.find(
-                  (e) => e.name == "Basic Prompting (Hello, World)",
-                )!
-              }
-            />
-          )}
-          {examples.find((e) => e.name == "Memory Chatbot") && (
-            <UndrawCardComponent
-              key={1}
-              flow={examples.find((e) => e.name == "Memory Chatbot")!}
-            />
-          )}
-          {examples.find((e) => e.name == "Document QA") && (
-            <UndrawCardComponent
-              key={2}
-              flow={examples.find((e) => e.name == "Document QA")!}
-            />
-          )}
-          {examples.find((e) => e.name == "Blog Writer") && (
-            <UndrawCardComponent
-              key={3}
-              flow={examples.find((e) => e.name == "Blog Writer")!}
-            />
-          )}
-          {examples.find((e) => e.name == "Vector Store RAG") && (
-            <UndrawCardComponent
-              key={4}
-              flow={examples.find((e) => e.name == "Vector Store RAG")!}
-            />
-          )}
+            {examples.find(
+              (e) => e.name == "Basic Prompting (Hello, World)",
+            ) && (
+              <UndrawCardComponent
+                key={0}
+                flow={
+                  examples.find(
+                    (e) => e.name == "Basic Prompting (Hello, World)",
+                  )!
+                }
+              />
+            )}
+            {examples.find((e) => e.name == "Memory Chatbot") && (
+              <UndrawCardComponent
+                key={1}
+                flow={examples.find((e) => e.name == "Memory Chatbot")!}
+              />
+            )}
+            {examples.find((e) => e.name == "Document QA") && (
+              <UndrawCardComponent
+                key={2}
+                flow={examples.find((e) => e.name == "Document QA")!}
+              />
+            )}
+            {examples.find((e) => e.name == "Blog Writer") && (
+              <UndrawCardComponent
+                key={3}
+                flow={examples.find((e) => e.name == "Blog Writer")!}
+              />
+            )}
+            {examples.find((e) => e.name == "Vector Store RAG") && (
+              <UndrawCardComponent
+                key={4}
+                flow={examples.find((e) => e.name == "Vector Store RAG")!}
+              />
+            )}
+          </div>
         </div>
       </BaseModal.Content>
     </BaseModal>