From 896906ae7703b4d8929882d48f8650cb29895a07 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Mon, 23 Jun 2025 15:57:02 +0800
Subject: [PATCH] feat: refactor layout structure in PipelineSettings component
 for improved responsiveness

---
 .../settings/pipeline-settings/index.tsx      | 54 ++++++++++---------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.tsx
index 7ac3c11fea..6b41544cd2 100644
--- a/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.tsx
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.tsx
@@ -147,34 +147,38 @@ const PipelineSettings = ({
     <div
       className='relative flex h-[calc(100vh-56px)] min-w-[1024px] overflow-x-auto rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle'
     >
-      <div className='flex h-full flex-1 flex-col px-14'>
-        <LeftHeader title={t('datasetPipeline.documentSettings.title')} />
-        <div className='grow overflow-y-auto'>
-          <ProcessDocuments
-            ref={formRef}
-            lastRunInputData={lastRunData!.input_data}
-            datasourceNodeId={lastRunData!.datasource_node_id}
-            onProcess={onClickProcess}
-            onPreview={onClickPreview}
-            onSubmit={handleSubmit}
-          />
+      <div className='h-full min-w-0 flex-1'>
+        <div className='flex h-full flex-col px-14'>
+          <LeftHeader title={t('datasetPipeline.documentSettings.title')} />
+          <div className='grow overflow-y-auto'>
+            <ProcessDocuments
+              ref={formRef}
+              lastRunInputData={lastRunData!.input_data}
+              datasourceNodeId={lastRunData!.datasource_node_id}
+              onProcess={onClickProcess}
+              onPreview={onClickPreview}
+              onSubmit={handleSubmit}
+            />
+          </div>
         </div>
       </div>
       {/* Preview */}
-      <div className='flex h-full flex-1 pl-2 pt-2'>
-        <ChunkPreview
-          dataSourceType={lastRunData!.datasource_type}
-          files={files}
-          onlineDocuments={onlineDocuments}
-          websitePages={websitePages}
-          isIdle={isIdle}
-          isPending={isPending && isPreview.current}
-          estimateData={estimateData}
-          onPreview={onClickPreview}
-          handlePreviewFileChange={noop}
-          handlePreviewOnlineDocumentChange={noop}
-          handlePreviewWebsitePageChange={noop}
-        />
+      <div className='h-full min-w-0 flex-1'>
+        <div className='flex h-full flex-col pl-2 pt-2'>
+          <ChunkPreview
+            dataSourceType={lastRunData!.datasource_type}
+            files={files}
+            onlineDocuments={onlineDocuments}
+            websitePages={websitePages}
+            isIdle={isIdle}
+            isPending={isPending && isPreview.current}
+            estimateData={estimateData}
+            onPreview={onClickPreview}
+            handlePreviewFileChange={noop}
+            handlePreviewOnlineDocumentChange={noop}
+            handlePreviewWebsitePageChange={noop}
+          />
+        </div>
       </div>
     </div>
   )