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

fix: Improve modal layout responsiveness and overflow handling (#8936)

Browse source 
✨ (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
This commit is contained in:
Cristhian Zanforlin Lousa 2025-07-08 20:12:16 -03:00 • committed by GitHub
commit f390d3a4e9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 5 additions and 5 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

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

2
src/frontend/src/modals/templatesModal/components/GetStartedComponent/index.tsx
View file

@ -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} />
))}

2
src/frontend/src/modals/templatesModal/components/TemplateGetStartedCardComponent/index.tsx
View file

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

4
src/frontend/src/modals/templatesModal/index.tsx
View file

@ -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 />
) : (