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
This commit is contained in:
Lucas Oliveira 2024-07-16 16:40:32 -03:00 • committed by GitHub
commit 424118be7b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 42 additions and 38 deletions

View file

@ -40,7 +40,7 @@ export const switchCaseModalSize = (size: string) => {
break; break;
case "three-cards": case "three-cards":
minWidth = "min-w-[1066px]"; minWidth = "min-w-[1066px]";
height = "h-fit"; height = "max-h-[94vh]";
break; break;
case "large-thin": case "large-thin":
minWidth = "min-w-[65vw]"; minWidth = "min-w-[65vw]";

View file

@ -17,11 +17,14 @@ export default function NewFlowModal({
Get Started Get Started
</span> </span>
</BaseModal.Header> </BaseModal.Header>
<BaseModal.Content> <BaseModal.Content overflowHidden>
<div className="mb-5 grid h-fit w-full grid-cols-3 gap-4 overflow-auto pb-6 custom-scroll"> <div className="overflow-y-auto rounded-md border bg-muted p-4">
<div className="grid w-full grid-cols-3 gap-4">
<NewFlowCardComponent /> <NewFlowCardComponent />
{examples.find((e) => e.name == "Basic Prompting (Hello, World)") && ( {examples.find(
(e) => e.name == "Basic Prompting (Hello, World)",
) && (
<UndrawCardComponent <UndrawCardComponent
key={0} key={0}
flow={ flow={
@ -56,6 +59,7 @@ export default function NewFlowModal({
/> />
)} )}
</div> </div>
</div>
</BaseModal.Content> </BaseModal.Content>
</BaseModal> </BaseModal>
); );