Evaluation: Make the evals run card responsive

app/(main)/evaluations/[id]/page.tsx

@@ -260,8 +260,8 @@ export default function EvaluationReport() {
         <Sidebar collapsed={sidebarCollapsed} activeRoute="/evaluations" />
 
         <div className="flex-1 flex flex-col overflow-hidden">
-          <div className="border-b px-4 py-3.5 flex items-center justify-between shrink-0 bg-bg-primary border-border">
-            <div className="flex items-center gap-3 flex-1 min-w-0">
+          <div className="border-b px-4 py-3.5 flex flex-wrap items-center justify-between gap-3 shrink-0 bg-bg-primary border-border">
+            <div className="flex items-center gap-3 min-w-0 flex-1">
               {sidebarCollapsed && (
                 <button
                   onClick={() => setSidebarCollapsed(false)}
@@ -278,18 +278,20 @@ export default function EvaluationReport() {
               >
                 <ChevronLeftIcon />
               </button>
-              <div className="min-w-0 flex-1 flex items-center gap-3 overflow-hidden">
+              <div className="min-w-0 flex-1 flex flex-wrap items-center gap-x-3 gap-y-1 overflow-hidden">
                 <h1 className="text-base font-semibold truncate min-w-0 text-text-primary tracking-[-0.01em]">
                   {job.run_name}
                 </h1>
                 <span className="flex items-center gap-1 text-xs shrink-0 text-text-secondary">
                   <DatabaseIcon className="shrink-0" />
-                  {job.dataset_name}
+                  <span className="truncate max-w-[200px]">
+                    {job.dataset_name}
+                  </span>
                 </span>
               </div>
             </div>
 
-            <div className="flex items-center gap-3 shrink-0 relative z-10">
+            <div className="flex flex-wrap items-center gap-2 sm:gap-3 shrink-0 relative z-10">
               <div className="inline-flex rounded-lg p-0.5 bg-bg-secondary">
                 <button
                   type="button"
@@ -299,7 +301,8 @@ export default function EvaluationReport() {
                   className={`${segmentedClass} disabled:cursor-not-allowed disabled:opacity-60`}
                 >
                   <MenuIcon className="w-3.5 h-3.5 pointer-events-none" />
-                  Individual Rows
+                  <span className="hidden sm:inline">Individual Rows</span>
+                  <span className="sm:hidden">Rows</span>
                 </button>
                 <button
                   type="button"
@@ -309,23 +312,26 @@ export default function EvaluationReport() {
                   className={`${segmentedClass} disabled:cursor-not-allowed disabled:opacity-60`}
                 >
                   <GroupIcon className="pointer-events-none" />
-                  Group by Questions
+                  <span className="hidden sm:inline">Group by Questions</span>
+                  <span className="sm:hidden">Grouped</span>
                 </button>
               </div>
               <Button
                 variant="outline"
                 size="sm"
                 onClick={() => setIsConfigModalOpen(true)}
               >
-                View Config
+                <span className="hidden sm:inline">View Config</span>
+                <span className="sm:hidden">Config</span>
               </Button>
               <Button
                 variant="primary"
                 size="sm"
                 onClick={handleExportCSV}
                 disabled={!hasScore || isFormatSwitching || isResyncing}
               >
-                Export CSV
+                <span className="hidden sm:inline">Export CSV</span>
+                <span className="sm:hidden">Export</span>
               </Button>
             </div>
           </div>

app/(main)/evaluations/page.tsx

@@ -145,18 +145,18 @@ function SimplifiedEvalContent() {
     reader.readAsText(file);
   };
 
-  const handleCreateDataset = async () => {
+  const handleCreateDataset = async (): Promise<boolean> => {
     if (!uploadedFile) {
       toast.error("Please select a CSV file");
-      return;
+      return false;
     }
     if (!datasetName.trim()) {
       toast.error("Please enter a dataset name");
-      return;
+      return false;
     }
     if (!isAuthenticated) {
       toast.error("Please log in to create datasets.");
-      return;
+      return false;
     }
 
     setIsUploading(true);
@@ -188,10 +188,12 @@ function SimplifiedEvalContent() {
       setDuplicationFactor("1");
 
       toast.success("Dataset created successfully!");
+      return true;
     } catch (error: unknown) {
       toast.error(
         `Failed to create dataset: ${error instanceof Error ? error.message : "Unknown error"}`,
       );
+      return false;
     } finally {
       setIsUploading(false);
     }

app/components/DatasetListSkeleton.tsx

@@ -13,18 +13,18 @@ export default function DatasetListSkeleton({
           className="rounded-lg overflow-hidden bg-bg-primary shadow-sm border-l-[3px] border-l-neutral-200"
         >
           <div className="px-5 py-4">
-            <div className="flex items-start justify-between gap-4">
+            <div className="flex flex-wrap items-start justify-between gap-3">
               <div className="min-w-0 flex-1">
-                <div className="h-4 w-44 bg-neutral-200 rounded mb-2" />
-                <div className="h-3 w-64 bg-neutral-100 rounded mb-3" />
-                <div className="flex gap-3">
+                <div className="h-4 w-44 max-w-full bg-neutral-200 rounded mb-2" />
+                <div className="h-3 w-64 max-w-full bg-neutral-100 rounded mb-3" />
+                <div className="flex flex-wrap gap-x-3 gap-y-1">
                   <div className="h-3 w-16 bg-neutral-100 rounded" />
                   <div className="h-3 w-20 bg-neutral-100 rounded" />
                 </div>
               </div>
-              <div className="flex items-center gap-2 shrink-0">
-                <div className="h-7 w-14 bg-neutral-100 rounded-lg" />
-                <div className="h-7 w-16 bg-neutral-100 rounded-lg" />
+              <div className="flex items-center gap-2 shrink-0 ml-auto">
+                <div className="h-7 w-14 bg-neutral-100 rounded-full" />
+                <div className="h-7 w-16 bg-neutral-100 rounded-full" />
               </div>
             </div>
           </div>

app/components/ResultsTableSkeleton.tsx

@@ -8,18 +8,20 @@ export default function ResultsTableSkeleton({
   cols = 5,
 }: ResultsTableSkeletonProps) {
   return (
-    <div className="p-4 space-y-3 animate-pulse">
-      {Array.from({ length: rows }).map((_, r) => (
-        <div key={r} className="flex items-center gap-3">
-          {Array.from({ length: cols }).map((_, c) => (
-            <div
-              key={c}
-              className="flex-1 h-12 bg-neutral-100 rounded"
-              style={{ animationDelay: `${(r + c) * 50}ms` }}
-            />
-          ))}
-        </div>
-      ))}
+    <div className="overflow-x-auto">
+      <div className="p-4 space-y-3 animate-pulse min-w-[640px]">
+        {Array.from({ length: rows }).map((_, r) => (
+          <div key={r} className="flex items-center gap-3">
+            {Array.from({ length: cols }).map((_, c) => (
+              <div
+                key={c}
+                className="flex-1 h-12 min-w-20 bg-neutral-100 rounded"
+                style={{ animationDelay: `${(r + c) * 50}ms` }}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
     </div>
   );
 }

app/components/RunsListSkeleton.tsx

@@ -13,16 +13,20 @@ export default function RunsListSkeleton({ count = 5 }: RunsListSkeletonProps) {
           <div className="px-5 py-4">
             <div className="flex items-start justify-between gap-4">
               <div className="min-w-0 flex-1">
-                <div className="h-4 w-52 bg-neutral-200 rounded" />
+                <div className="h-4 w-40 max-w-full bg-neutral-200 rounded" />
               </div>
-              <div className="h-5 w-20 bg-neutral-100 rounded-full" />
+              <div className="h-5 w-20 bg-neutral-100 rounded-full shrink-0" />
             </div>
-            <div className="flex items-center justify-between gap-4 mt-3">
-              <div className="flex items-center gap-3">
-                <div className="h-3 w-32 bg-neutral-100 rounded" />
+
+            <div className="flex flex-wrap items-center justify-between gap-3 mt-3">
+              <div className="flex flex-wrap items-center gap-x-3 gap-y-1 min-w-0">
+                <div className="h-3 w-32 max-w-full bg-neutral-100 rounded" />
                 <div className="h-3 w-24 bg-neutral-100 rounded" />
               </div>
-              <div className="h-7 w-24 bg-neutral-100 rounded-lg" />
+              <div className="flex items-center gap-2 shrink-0 ml-auto">
+                <div className="h-7 w-20 bg-neutral-100 rounded-full" />
+                <div className="h-7 w-24 bg-neutral-100 rounded-full" />
+              </div>
             </div>
           </div>
         </div>

app/components/evaluations/CreateDatasetForm.tsx

@@ -20,7 +20,7 @@ interface CreateDatasetFormProps {
   onFileSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onRemoveFile: () => void;
   isUploading: boolean;
-  handleCreateDataset: () => void;
+  handleCreateDataset: () => void | Promise<boolean>;
   resetForm: () => void;
 }
 

app/components/evaluations/DatasetsTab.tsx

@@ -5,8 +5,8 @@ import { Dataset, ViewDatasetModalData } from "@/app/lib/types/dataset";
 import { useToast } from "@/app/components/Toast";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { apiFetch } from "@/app/lib/apiClient";
-import { DatabaseIcon } from "@/app/components/icons";
-import { DatasetListSkeleton } from "@/app/components";
+import { DatabaseIcon, PlusIcon } from "@/app/components/icons";
+import { Button, DatasetListSkeleton, Modal } from "@/app/components";
 import DatasetCard from "./DatasetCard";
 import CreateDatasetForm from "./CreateDatasetForm";
 import ViewDatasetModal from "./ViewDatasetModal";
@@ -24,7 +24,7 @@ export interface DatasetsTabProps {
   onFileSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onRemoveFile: () => void;
   isUploading: boolean;
-  handleCreateDataset: () => void;
+  handleCreateDataset: () => Promise<boolean>;
   resetForm: () => void;
   storedDatasets: Dataset[];
   isDatasetsLoading: boolean;
@@ -80,6 +80,7 @@ export default function DatasetsTab({
   const [deletingId, setDeletingId] = useState<number | null>(null);
   const [confirmDeleteId, setConfirmDeleteId] = useState<number | null>(null);
   const [viewingId, setViewingId] = useState<number | null>(null);
+  const [isFormModalOpen, setIsFormModalOpen] = useState(false);
   const [viewModalData, setViewModalData] =
     useState<ViewDatasetModalData | null>(null);
 
@@ -146,14 +147,44 @@ export default function DatasetsTab({
       ? storedDatasets.find((d) => d.dataset_id === confirmDeleteId)
       : undefined;
 
+  const handleCreate = async (): Promise<boolean> => {
+    const success = await handleCreateDataset();
+    if (success) setIsFormModalOpen(false);
+    return success;
+  };
+
+  const formProps = {
+    datasetName,
+    setDatasetName,
+    datasetDescription,
+    setDatasetDescription,
+    duplicationFactor,
+    setDuplicationFactor,
+    uploadedFile,
+    onFileSelect,
+    onRemoveFile,
+    isUploading,
+    handleCreateDataset: handleCreate,
+    resetForm,
+  };
+
   return (
     <div className="flex-1 flex overflow-hidden">
       <div className="flex-1 flex flex-col overflow-hidden bg-bg-secondary">
         <div className="flex-1 overflow-auto p-6">
-          <div className="flex items-center justify-between mb-4">
+          <div className="flex flex-wrap items-center justify-between gap-2 mb-4">
             <h3 className="text-base font-semibold text-text-primary">
               Datasets
             </h3>
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={() => setIsFormModalOpen(true)}
+              className="lg:hidden"
+            >
+              <PlusIcon className="w-4 h-4" />
+              New
+            </Button>
           </div>
 
           {isDatasetsLoading ? (
@@ -165,7 +196,12 @@ export default function DatasetsTab({
                 No datasets yet
               </p>
               <p className="text-xs text-text-secondary">
-                Create your first dataset using the form on the right
+                <span className="hidden lg:inline">
+                  Create your first dataset using the form on the right
+                </span>
+                <span className="lg:hidden">
+                  Tap <strong>New</strong> to create your first dataset
+                </span>
               </p>
             </div>
           ) : (
@@ -186,26 +222,25 @@ export default function DatasetsTab({
         </div>
       </div>
 
+      {/* Right Panel - Create Dataset Form (lg+ only) */}
       <div
-        className="shrink-0 border-l flex flex-col overflow-hidden bg-bg-primary border-border"
+        className="hidden lg:flex shrink-0 border-l flex-col overflow-hidden bg-bg-primary border-border"
         style={{ width: `${leftPanelWidth}px` }}
       >
-        <CreateDatasetForm
-          datasetName={datasetName}
-          setDatasetName={setDatasetName}
-          datasetDescription={datasetDescription}
-          setDatasetDescription={setDatasetDescription}
-          duplicationFactor={duplicationFactor}
-          setDuplicationFactor={setDuplicationFactor}
-          uploadedFile={uploadedFile}
-          onFileSelect={onFileSelect}
-          onRemoveFile={onRemoveFile}
-          isUploading={isUploading}
-          handleCreateDataset={handleCreateDataset}
-          resetForm={resetForm}
-        />
+        <CreateDatasetForm {...formProps} />
       </div>
 
+      {/* Mobile/tablet — form rendered in a modal */}
+      <Modal
+        open={isFormModalOpen}
+        onClose={() => setIsFormModalOpen(false)}
+        title="Create New Dataset"
+        maxWidth="max-w-2xl"
+        maxHeight="max-h-[90vh]"
+      >
+        <CreateDatasetForm {...formProps} />
+      </Modal>
+
       {viewModalData && (
         <ViewDatasetModal
           data={viewModalData}

app/components/evaluations/EvalRunCard.tsx

@@ -61,16 +61,16 @@ export default function EvalRunCard({
           </div>
         )}
 
-        <div className="flex items-center justify-between gap-4 mt-3">
-          <div className="flex items-center gap-3 text-xs text-text-secondary">
+        <div className="flex flex-wrap items-center justify-between gap-3 mt-3">
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-text-secondary min-w-0">
             {job.dataset_name && (
-              <span className="flex items-center gap-1.5">
+              <span className="flex items-center gap-1.5 min-w-0">
                 <DatabaseIcon className="shrink-0" />
-                {job.dataset_name}
+                <span className="block truncate">{job.dataset_name}</span>
               </span>
             )}
             {job.assistant_id && assistantConfig?.name && (
-              <span className="px-1.5 py-0.5 rounded bg-bg-secondary">
+              <span className="inline-block px-1.5 py-0.5 rounded bg-bg-secondary truncate max-w-40">
                 {assistantConfig.name}
               </span>
             )}
@@ -103,7 +103,7 @@ export default function EvalRunCard({
               </span>
             )}
           </div>
-          <div className="flex items-center gap-3 shrink-0">
+          <div className="flex items-center gap-2 shrink-0 ml-auto">
             <Button
               variant="outline"
               size="sm"