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

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]";

src/frontend/src/modals/newFlowModal/index.tsx

@@ -17,11 +17,14 @@ 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">
+      <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)") && (
+            {examples.find(
+              (e) => e.name == "Basic Prompting (Hello, World)",
+            ) && (
               <UndrawCardComponent
                 key={0}
                 flow={
@@ -56,6 +59,7 @@ export default function NewFlowModal({
               />
             )}
           </div>
+        </div>
       </BaseModal.Content>
     </BaseModal>
   );