feat: refactor layout structure in PipelineSettings component for improved responsiveness

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'>
+      <div className='h-full min-w-0 flex-1'>
-        <LeftHeader title={t('datasetPipeline.documentSettings.title')} />
+        <div className='flex h-full flex-col px-14'>
-        <div className='grow overflow-y-auto'>
+          <LeftHeader title={t('datasetPipeline.documentSettings.title')} />
-          <ProcessDocuments
+          <div className='grow overflow-y-auto'>
-            ref={formRef}
+            <ProcessDocuments
-            lastRunInputData={lastRunData!.input_data}
+              ref={formRef}
-            datasourceNodeId={lastRunData!.datasource_node_id}
+              lastRunInputData={lastRunData!.input_data}
-            onProcess={onClickProcess}
+              datasourceNodeId={lastRunData!.datasource_node_id}
-            onPreview={onClickPreview}
+              onProcess={onClickProcess}
-            onSubmit={handleSubmit}
+              onPreview={onClickPreview}
-          />
+              onSubmit={handleSubmit}
+            />
+          </div>
         </div>
       </div>
       {/* Preview */}
-      <div className='flex h-full flex-1 pl-2 pt-2'>
+      <div className='h-full min-w-0 flex-1'>
-        <ChunkPreview
+        <div className='flex h-full flex-col pl-2 pt-2'>
-          dataSourceType={lastRunData!.datasource_type}
+          <ChunkPreview
-          files={files}
+            dataSourceType={lastRunData!.datasource_type}
-          onlineDocuments={onlineDocuments}
+            files={files}
-          websitePages={websitePages}
+            onlineDocuments={onlineDocuments}
-          isIdle={isIdle}
+            websitePages={websitePages}
-          isPending={isPending && isPreview.current}
+            isIdle={isIdle}
-          estimateData={estimateData}
+            isPending={isPending && isPreview.current}
-          onPreview={onClickPreview}
+            estimateData={estimateData}
-          handlePreviewFileChange={noop}
+            onPreview={onClickPreview}
-          handlePreviewOnlineDocumentChange={noop}
+            handlePreviewFileChange={noop}
-          handlePreviewWebsitePageChange={noop}
+            handlePreviewOnlineDocumentChange={noop}
-        />
+            handlePreviewWebsitePageChange={noop}
+          />
+        </div>
       </div>
     </div>
   )