From 55eb894d8eb535f5850876a813694093cea80461 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 29 Apr 2026 20:48:39 +0800
Subject: [PATCH] fix(web): scroll of dataset evaluation page

---
 .../components/layout/pipeline-evaluation.tsx  |  8 ++++----
 .../pipeline/pipeline-results-panel.tsx        |  6 +++---
 .../pipeline/pipeline-results-table.tsx        | 18 +++++++++---------
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
index 93b5deb543..001c1c09c5 100644
--- a/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
+++ b/web/app/components/evaluation/components/layout/pipeline-evaluation.tsx
@@ -27,8 +27,8 @@ const PipelineEvaluation = ({
   }, [ensureResource, resourceId, resourceType])
 
   return (
-    <div className="flex h-full min-h-0 flex-col bg-background-default xl:flex-row">
-      <div className="flex min-h-0 flex-col border-b border-divider-subtle bg-background-default xl:w-[450px] xl:shrink-0 xl:border-r xl:border-b-0">
+    <div className="flex h-full min-h-0 flex-col overflow-y-auto bg-background-default xl:flex-row xl:overflow-hidden">
+      <div className="flex shrink-0 flex-col border-b border-divider-subtle bg-background-default xl:min-h-0 xl:w-[450px] xl:border-r xl:border-b-0">
         <div className="px-6 pt-4 pb-2">
           <SectionHeader
             title={t('title')}
@@ -76,7 +76,7 @@ const PipelineEvaluation = ({
 
         <div className="border-t border-divider-subtle" />
 
-        <div className="min-h-0 flex-1 px-6 py-4">
+        <div className="px-6 py-4 xl:min-h-0 xl:flex-1">
           <HistoryTab
             resourceType={resourceType}
             resourceId={resourceId}
@@ -84,7 +84,7 @@ const PipelineEvaluation = ({
         </div>
       </div>
 
-      <div className="min-h-0 flex-1 bg-background-default">
+      <div className="shrink-0 bg-background-default xl:min-h-0 xl:flex-1">
         <PipelineResultsPanel
           resourceType={resourceType}
           resourceId={resourceId}
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-results-panel.tsx b/web/app/components/evaluation/components/pipeline/pipeline-results-panel.tsx
index 48050ad27c..271302da9d 100644
--- a/web/app/components/evaluation/components/pipeline/pipeline-results-panel.tsx
+++ b/web/app/components/evaluation/components/pipeline/pipeline-results-panel.tsx
@@ -57,7 +57,7 @@ const PipelineResultsPanel = ({
 
   if (isEmpty) {
     return (
-      <div className="flex h-full min-h-[360px] w-full items-center justify-center xl:min-h-0">
+      <div className="flex min-h-[360px] w-full items-center justify-center xl:h-full xl:min-h-0">
         <div className="flex flex-col items-center gap-4 px-4 text-center">
           <span aria-hidden="true" className="i-ri-file-list-3-line h-12 w-12 text-text-quaternary" />
           <div className="system-md-medium text-text-quaternary">{t('results.empty')}</div>
@@ -67,7 +67,7 @@ const PipelineResultsPanel = ({
   }
 
   return (
-    <div className="flex h-full min-h-0 flex-col border-l border-divider-subtle bg-background-default">
+    <div className="flex min-h-[360px] flex-col border-l border-divider-subtle bg-background-default xl:h-full xl:min-h-0">
       <div className="shrink-0 px-6 pt-4 pb-2">
         <h2 className="system-xl-semibold text-text-primary">{t('results.title')}</h2>
       </div>
@@ -75,7 +75,7 @@ const PipelineResultsPanel = ({
         <div className="px-6 py-4 system-sm-regular text-text-destructive">{t('results.loadFailed')}</div>
       )}
       {!runDetailQuery.isError && (
-        <div className="flex min-h-0 flex-1 flex-col px-6 py-1">
+        <div className="flex flex-col px-6 py-1 xl:min-h-0 xl:flex-1">
           <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 py-1">
             <div className="flex min-w-0 flex-wrap items-center gap-2 system-xs-regular text-text-secondary">
               <span>{getRunDate(runDetail?.run.started_at ?? runDetail?.run.created_at ?? null)}</span>
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx b/web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx
index 15e21f1315..acb0b77114 100644
--- a/web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx
+++ b/web/app/components/evaluation/components/pipeline/pipeline-results-table.tsx
@@ -26,7 +26,7 @@ const PipelineResultsTable = ({
   const { t } = useTranslation('evaluation')
 
   return (
-    <div className="min-h-0 flex-1 overflow-auto py-2">
+    <div className="overflow-x-auto py-2 xl:min-h-0 xl:flex-1 xl:overflow-auto">
       <table className="min-w-full table-fixed border-collapse overflow-hidden rounded-lg">
         <colgroup>
           <col className="w-10" />
@@ -38,14 +38,14 @@ const PipelineResultsTable = ({
         <thead>
           <tr className="bg-background-section">
             <th className="h-7 rounded-l-lg" />
-            <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('results.columns.query')}</th>
-            <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('results.columns.expected')}</th>
-            <th className="system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary">{t('results.columns.actual')}</th>
+            <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('results.columns.query')}</th>
+            <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('results.columns.expected')}</th>
+            <th className="h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary">{t('results.columns.actual')}</th>
             {metricColumns.map((column, index) => (
               <th
                 key={column.id}
                 className={cn(
-                  'system-xs-medium-uppercase h-7 px-3 text-left text-text-tertiary',
+                  'h-7 px-3 text-left system-xs-medium-uppercase text-text-tertiary',
                   index === metricColumns.length - 1 && 'rounded-r-lg',
                 )}
               >
@@ -79,14 +79,14 @@ const PipelineResultsTable = ({
                     )}
                   />
                 </td>
-                <td className="system-sm-regular h-10 px-3 py-3 align-top text-text-secondary">
+                <td className="h-10 px-3 py-3 align-top system-sm-regular text-text-secondary">
                   <div className="line-clamp-2 break-words">{getQueryContent(item)}</div>
                 </td>
-                <td className="system-sm-regular h-10 px-3 py-3 align-top text-text-secondary">
+                <td className="h-10 px-3 py-3 align-top system-sm-regular text-text-secondary">
                   <div className="line-clamp-2 break-words">{formatValue(item.expected_output)}</div>
                 </td>
                 <td className={cn(
-                  'system-sm-regular h-10 px-3 py-3 align-top',
+                  'h-10 px-3 py-3 align-top system-sm-regular',
                   actualOutput ? 'text-text-secondary' : 'text-text-destructive',
                 )}
                 >
@@ -100,7 +100,7 @@ const PipelineResultsTable = ({
                   return (
                     <td
                       key={column.id}
-                      className={cn('system-sm-regular h-10 px-3 py-3 align-top', getMetricTextClassName(metricValue, column))}
+                      className={cn('h-10 px-3 py-3 align-top system-sm-regular', getMetricTextClassName(metricValue, column))}
                     >
                       {formatValue(metricValue)}
                     </td>