fix: Improve layout by adding overflow handling in CreateFromPipeline and List components

feat/rag-pipeline
twwu 11 months ago
parent 0db7967e5f
commit 5d7a533ada

@ -7,7 +7,7 @@ import Effect from '../../base/effect'
const CreateFromPipeline = () => { const CreateFromPipeline = () => {
return ( return (
<div <div
className='relative flex h-[calc(100vh-56px)] flex-col rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle' className='relative flex h-[calc(100vh-56px)] flex-col overflow-hidden rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle'
> >
<Effect className='left-8 top-[-34px] opacity-20' /> <Effect className='left-8 top-[-34px] opacity-20' />
<Header /> <Header />

@ -9,7 +9,7 @@ const BuiltInPipelineList = () => {
return null return null
return ( return (
<div className='grid grow grid-cols-1 gap-3 overflow-y-auto px-16 pt-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'> <div className='grid grid-cols-1 gap-3 py-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
{list.map((pipeline, index) => ( {list.map((pipeline, index) => (
<TemplateCard <TemplateCard
key={index} key={index}

@ -9,7 +9,7 @@ const CustomizedList = () => {
return null return null
return ( return (
<div className='grid grow grid-cols-1 gap-3 overflow-y-auto px-16 pt-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'> <div className='grid grid-cols-1 gap-3 py-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
{list.map((pipeline, index) => ( {list.map((pipeline, index) => (
<TemplateCard <TemplateCard
key={index} key={index}

@ -20,18 +20,20 @@ const List = () => {
}, []) }, [])
return ( return (
<div className='flex grow flex-col'> <div className='flex grow flex-col overflow-hidden'>
<Tab <Tab
activeTab={activeTab} activeTab={activeTab}
handleTabChange={handleTabChange} handleTabChange={handleTabChange}
options={options} options={options}
/> />
{ <div className='grow overflow-y-auto px-16'>
activeTab === 'built-in' && <BuiltInPipelineList /> {
} activeTab === 'built-in' && <BuiltInPipelineList />
{ }
activeTab === 'customized' && <CustomizedList /> {
} activeTab === 'customized' && <CustomizedList />
}
</div>
</div> </div>
) )
} }

Loading…
Cancel
Save