Fix table overflow and add checkbox for seen status

astro-app/src/components/ProjectCard.tsx

@@ -66,7 +66,7 @@ export function ProjectCard({ project, onSeenStatusChange }: ProjectCardProps) {
 
       {/* Project Actions */}
       <div className="flex items-center justify-between">
-        <>
+        <div className="flex items-center space-x-4">
           <div className="flex items-center space-x-4">
             {/* Project URL */}
             {project.project_url && (
@@ -95,26 +95,24 @@ export function ProjectCard({ project, onSeenStatusChange }: ProjectCardProps) {
             )}
           </div>
         
-          {/* Seen Toggle */}
+        </div>
-          <Button
+        
-            variant={seen ? "secondary" : "outline"}
+        {/* Seen Checkbox */}
-            size="sm"
+        <div className="flex items-center space-x-2">
-            onClick={toggleSeen}
+          <input
-            className="ml-auto"
+            type="checkbox"
+            id={`seen-${project.id}`}
+            className="w-4 h-4 rounded border-border bg-background"
+            checked={seen}
+            onChange={toggleSeen}
+          />
+          <label 
+            htmlFor={`seen-${project.id}`}
+            className="text-sm text-muted-foreground cursor-pointer"
           >
-            {seen ? (
+            Seen
-              <>
+          </label>
-                <X className="w-4 h-4 mr-1" />
+        </div>
-                Mark Unseen
-              </>
-            ) : (
-              <>
-                <Check className="w-4 h-4 mr-1" />
-                Mark Seen
-              </>
-            )}
-          </Button>
-        </>
       </div>
 
       {/* Engagement Stats */}

astro-app/src/components/ProjectsTable.tsx

@@ -68,6 +68,36 @@ export function ProjectsTable({ projects, title, showUrlColumn = true, onSeenSta
   };
 
   const columns = useMemo(() => [
+    columnHelper.display({
+      id: 'seen',
+      header: ({ table }) => (
+        <div className="flex justify-center">
+          <input
+            type="checkbox"
+            className="w-4 h-4 rounded border-border bg-background"
+            checked={table.getIsAllRowsSelected()}
+            indeterminate={table.getIsSomeRowsSelected()}
+            onChange={table.getToggleAllRowsSelectedHandler()}
+          />
+        </div>
+      ),
+      cell: ({ row }) => {
+        const projectId = row.original.id;
+        const isSeen = seenProjects.has(projectId);
+        
+        return (
+          <div className="flex justify-center">
+            <input
+              type="checkbox"
+              className="w-4 h-4 rounded border-border bg-background"
+              checked={isSeen}
+              onChange={() => toggleSeen(projectId)}
+            />
+          </div>
+        );
+      },
+      size: 60,
+    }),
     columnHelper.accessor('author_name', {
       header: ({ column }) => (
         <Button
@@ -96,7 +126,7 @@ export function ProjectsTable({ projects, title, showUrlColumn = true, onSeenSta
           </div>
         </div>
       ),
-      size: 240,
+      size: 200,
     }),
     columnHelper.accessor('project_description', {
       header: ({ column }) => (
@@ -120,7 +150,7 @@ export function ProjectsTable({ projects, title, showUrlColumn = true, onSeenSta
           <p className="text-sm leading-relaxed line-clamp-3 pr-2">{row.original.project_description}</p>
         </div>
       ),
-      size: 400,
+      size: 350,
     }),
     ...(showUrlColumn ? [
       columnHelper.accessor('project_url', {
@@ -262,38 +292,6 @@ export function ProjectsTable({ projects, title, showUrlColumn = true, onSeenSta
       ),
       size: 140,
     }),
-    columnHelper.display({
-      id: 'actions',
-      header: 'Actions',
-      cell: ({ row }) => {
-        const projectId = row.original.id;
-        const isSeen = seenProjects.has(projectId);
-        
-        return (
-          <div className="w-full flex justify-center">
-            <Button
-              variant={isSeen ? "secondary" : "outline"}
-              size="sm"
-              onClick={() => toggleSeen(projectId)}
-              className="h-8"
-            >
-              {isSeen ? (
-                <>
-                  <X className="w-3 h-3 mr-1" />
-                  Unseen
-                </>
-              ) : (
-                <>
-                  <Check className="w-3 h-3 mr-1" />
-                  Seen
-                </>
-              )}
-            </Button>
-          </div>
-        );
-      },
-      size: 120,
-    }),
   ], [showUrlColumn, seenProjects]);
 
   const table = useReactTable({
@@ -327,7 +325,7 @@ export function ProjectsTable({ projects, title, showUrlColumn = true, onSeenSta
   }, [projects]);
 
   // Calculate total width
-  const totalWidth = table.getHeaderGroups()[0]?.headers.reduce((acc, header) => acc + header.getSize(), 0) || 1000;
+  const totalWidth = table.getHeaderGroups()[0]?.headers.reduce((acc, header) => acc + header.getSize(), 0) || 800;
 
   return (
     <div className="space-y-4">
@@ -367,7 +365,8 @@ export function ProjectsTable({ projects, title, showUrlColumn = true, onSeenSta
       </div>
 
       {/* Table Container */}
-      <div className="border rounded-lg overflow-hidden bg-card">
+      <div className="border rounded-lg bg-card">
+        <div className="overflow-x-auto">
           <div className="w-full" style={{ minWidth: `${totalWidth}px` }}>
           {/* Fixed Header */}
             <div className="sticky top-0 z-10 bg-muted/50 border-b">
@@ -421,5 +420,7 @@ export function ProjectsTable({ projects, title, showUrlColumn = true, onSeenSta
           </div>
         </div>
       </div>
+      </div>
+    </div>
   );
 }