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": case "templates":
minWidth = "w-[97vw] max-w-[1200px]"; minWidth = "w-[97vw] max-w-[1200px]";
height = 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; break;
case "three-cards": case "three-cards":
minWidth = "min-w-[1066px]"; 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."> <BaseModal.Header description="Start with templates showcasing Langflow's Prompting, RAG, and Agent use cases.">
Get started Get started
</BaseModal.Header> </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) => ( {cardData.map((card, index) => (
<TemplateGetStartedCardComponent key={index} {...card} /> <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 ? ( return flow ? (
<div <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} tabIndex={1}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onClick={handleClick} onClick={handleClick}

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

@ -59,7 +59,7 @@ export default function TemplatesModal({
return ( return (
<BaseModal size="templates" open={open} setOpen={setOpen} className="p-0"> <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"> <div className="flex h-full">
<SidebarProvider width="15rem" defaultOpen={false}> <SidebarProvider width="15rem" defaultOpen={false}>
<Nav <Nav
@ -67,7 +67,7 @@ export default function TemplatesModal({
currentTab={currentTab} currentTab={currentTab}
setCurrentTab={setCurrentTab} 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" ? ( {currentTab === "get-started" ? (
<GetStartedComponent /> <GetStartedComponent />
) : ( ) : (