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

This commit is contained in:
twwu 2025-07-01 17:46:41 +08:00
parent 0db7967e5f
commit 5d7a533ada
4 changed files with 12 additions and 10 deletions

View File

@ -7,7 +7,7 @@ import Effect from '../../base/effect'
const CreateFromPipeline = () => {
return (
<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' />
<Header />

View File

@ -9,7 +9,7 @@ const BuiltInPipelineList = () => {
return null
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) => (
<TemplateCard
key={index}

View File

@ -9,7 +9,7 @@ const CustomizedList = () => {
return null
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) => (
<TemplateCard
key={index}

View File

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