Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/routes/archive.index.tsx

@@ -500,9 +500,13 @@ function UploadDialog({
     });
   };
 
+  const previewKeys = preview.length > 0 ? Object.keys(preview[0]).slice(0, 4) : [];
+  const totalKeys = preview.length > 0 ? Object.keys(preview[0]).length : 0;
+  const previewRows = preview.slice(0, 3);
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-3xl">
+      <DialogContent className="max-w-2xl max-h-[85vh] flex flex-col">
         <DialogHeader>
           <DialogTitle>Upload CSV to {category.label}</DialogTitle>
           <DialogDescription>
@@ -510,7 +514,7 @@ function UploadDialog({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-3">
+        <div className="space-y-3 flex-1 overflow-y-auto min-h-0">
           <div>
             <Label className="text-xs">CSV file</Label>
             <Input
@@ -528,28 +532,38 @@ function UploadDialog({
 
           {preview.length > 0 && (
             <div>
-              <div className="text-xs text-muted-foreground mb-1">
-                Preview (first {preview.length} rows)
+              <div className="text-xs text-muted-foreground mb-1 flex items-center justify-between">
+                <span>
+                  Preview ({previewRows.length} {previewRows.length === 1 ? "row" : "rows"}, showing {previewKeys.length} of {totalKeys} columns)
+                </span>
               </div>
-              <div className="border rounded overflow-x-auto max-h-64">
-                <table className="w-full text-xs">
-                  <thead className="bg-muted/50 sticky top-0">
+              <div className="border rounded overflow-hidden">
+                <table className="w-full text-xs table-fixed">
+                  <thead className="bg-muted/50">
                     <tr>
-                      {Object.keys(preview[0]).map((k) => (
-                        <th key={k} className="text-left px-2 py-1 font-medium whitespace-nowrap">
+                      {previewKeys.map((k) => (
+                        <th key={k} className="text-left px-2 py-1 font-medium truncate" title={k}>
                           {k}
                         </th>
                       ))}
+                      {totalKeys > previewKeys.length && (
+                        <th className="text-left px-2 py-1 font-medium text-muted-foreground w-16">
+                          +{totalKeys - previewKeys.length}
+                        </th>
+                      )}
                     </tr>
                   </thead>
                   <tbody>
-                    {preview.map((row, i) => (
+                    {previewRows.map((row, i) => (
                       <tr key={i} className="border-t">
-                        {Object.keys(preview[0]).map((k) => (
-                          <td key={k} className="px-2 py-1 align-top max-w-[200px] truncate" title={row[k]}>
+                        {previewKeys.map((k) => (
+                          <td key={k} className="px-2 py-1 align-top truncate" title={row[k]}>
                             {row[k]}
                           </td>
                         ))}
+                        {totalKeys > previewKeys.length && (
+                          <td className="px-2 py-1 text-muted-foreground">…</td>
+                        )}
                       </tr>
                     ))}
                   </tbody>
@@ -565,7 +579,7 @@ function UploadDialog({
           )}
         </div>
 
-        <DialogFooter>
+        <DialogFooter className="flex-shrink-0">
           <Button variant="outline" onClick={() => onOpenChange(false)} disabled={uploading}>
             Cancel
           </Button>