From 5d7a533ada8a97cd901120491c49c2fc4b4583ee Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Tue, 1 Jul 2025 17:46:41 +0800
Subject: [PATCH] fix: Improve layout by adding overflow handling in
 CreateFromPipeline and List components

---
 .../datasets/create-from-pipeline/index.tsx      |  2 +-
 .../list/built-in-pipeline-list.tsx              |  2 +-
 .../list/customized-list.tsx                     |  2 +-
 .../datasets/create-from-pipeline/list/index.tsx | 16 +++++++++-------
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/web/app/components/datasets/create-from-pipeline/index.tsx b/web/app/components/datasets/create-from-pipeline/index.tsx
index 51f9b472fb..a72a0be94d 100644
--- a/web/app/components/datasets/create-from-pipeline/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/index.tsx
@@ -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 />
diff --git a/web/app/components/datasets/create-from-pipeline/list/built-in-pipeline-list.tsx b/web/app/components/datasets/create-from-pipeline/list/built-in-pipeline-list.tsx
index 4866c41169..d46d3adea0 100644
--- a/web/app/components/datasets/create-from-pipeline/list/built-in-pipeline-list.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/built-in-pipeline-list.tsx
@@ -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}
diff --git a/web/app/components/datasets/create-from-pipeline/list/customized-list.tsx b/web/app/components/datasets/create-from-pipeline/list/customized-list.tsx
index 5b5a2f3396..8e27322922 100644
--- a/web/app/components/datasets/create-from-pipeline/list/customized-list.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/customized-list.tsx
@@ -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}
diff --git a/web/app/components/datasets/create-from-pipeline/list/index.tsx b/web/app/components/datasets/create-from-pipeline/list/index.tsx
index 57f566c87a..ac73e0ff5a 100644
--- a/web/app/components/datasets/create-from-pipeline/list/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/index.tsx
@@ -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>
   )
 }