TODO: actually implement configurable pivot

Author: Dylan Huang

vite-app/src/components/EvaluationRow.tsx

@@ -173,7 +173,7 @@ const ExpandedContent = observer(
     input_metadata: EvaluationRowType["input_metadata"];
     tools: EvaluationRowType["tools"];
   }) => (
-    <div className="p-4 bg-gray-50 border-t border-gray-200">
+    <div className="p-4 bg-gray-50">
       <div className="flex gap-3 w-fit">
         {/* Left Column - Chat Interface */}
         <div className="min-w-0">

vite-app/src/components/EvaluationTable.tsx

@@ -4,7 +4,11 @@ import { state } from "../App";
 import { EvaluationRow } from "./EvaluationRow";
 import Button from "./Button";
 import Select from "./Select";
-import TableContainer, { TableHeader, TableHead } from "./TableContainer";
+import {
+  TableHeader,
+  TableHead,
+  TableBody as TableBodyBase,
+} from "./TableContainer";
 
 const TableBody = observer(
   ({ currentPage, pageSize }: { currentPage: number; pageSize: number }) => {
@@ -13,23 +17,23 @@ const TableBody = observer(
     const paginatedData = state.sortedDataset.slice(startIndex, endIndex);
 
     return (
-      <tbody className="divide-y divide-gray-200">
+      <TableBodyBase>
         {paginatedData.map((row, index) => (
           <EvaluationRow
             key={row.rollout_id}
             row={row}
             index={startIndex + index}
           />
         ))}
-      </tbody>
+      </TableBodyBase>
     );
   }
 );
 
 // Dedicated component for rendering the list - following MobX best practices
 export const EvaluationTable = observer(() => {
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(50);
+  const [pageSize, setPageSize] = useState(25);
 
   const totalRows = state.sortedDataset.length;
   const totalPages = Math.ceil(totalRows / pageSize);
@@ -51,8 +55,8 @@ export const EvaluationTable = observer(() => {
   }, [totalRows]);
 
   return (
-    <TableContainer>
-      {/* Pagination Controls */}
+    <div className="bg-white border border-gray-200">
+      {/* Pagination Controls - Fixed outside scrollable area */}
       <div className="px-3 py-2 border-b border-gray-200 bg-gray-50 flex items-center justify-between">
         <div className="flex items-center gap-4">
           <div className="text-xs text-gray-600">
@@ -111,23 +115,26 @@ export const EvaluationTable = observer(() => {
         </div>
       </div>
 
-      <table className="w-full min-w-max">
-        {/* Table Header */}
-        <TableHead>
-          <tr>
-            <TableHeader className="w-8">&nbsp;</TableHeader>
-            <TableHeader>Name</TableHeader>
-            <TableHeader>Status</TableHeader>
-            <TableHeader>Rollout ID</TableHeader>
-            <TableHeader>Model</TableHeader>
-            <TableHeader>Score</TableHeader>
-            <TableHeader>Created</TableHeader>
-          </tr>
-        </TableHead>
+      {/* Table Container - Only this area scrolls */}
+      <div className="overflow-x-auto">
+        <table className="w-full min-w-max">
+          {/* Table Header */}
+          <TableHead>
+            <tr>
+              <TableHeader className="w-8">&nbsp;</TableHeader>
+              <TableHeader>Name</TableHeader>
+              <TableHeader>Status</TableHeader>
+              <TableHeader>Rollout ID</TableHeader>
+              <TableHeader>Model</TableHeader>
+              <TableHeader>Score</TableHeader>
+              <TableHeader>Created</TableHeader>
+            </tr>
+          </TableHead>
 
-        {/* Table Body */}
-        <TableBody currentPage={currentPage} pageSize={pageSize} />
-      </table>
-    </TableContainer>
+          {/* Table Body */}
+          <TableBody currentPage={currentPage} pageSize={pageSize} />
+        </table>
+      </div>
+    </div>
   );
 });

vite-app/src/components/TableContainer.tsx

@@ -214,7 +214,7 @@ export function TableRowInteractive({
 
   return (
     <tr
-      className={`text-sm border-b border-gray-200 ${interactiveClasses} ${className}`}
+      className={`text-sm ${interactiveClasses} ${className}`}
       onClick={onClick}
     >
       {children}