jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

feat: add vertical scrolling capability to starter examples (#2739)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

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

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

78
src/frontend/src/modals/newFlowModal/index.tsx
View file

@ -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>