Table sizing improvements

.gitignore

@@ -19,3 +19,5 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+.kiro
+.vscode

src/components/feature-coverage/FeatureCoverage.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 const jsonData = import.meta.glob('/src/data/coverage/*.json');
 import {
   Table,
@@ -7,60 +7,67 @@ import {
   TableRow,
   TableHead,
   TableCell,
-} from "@/components/ui/table";
+} from '@/components/ui/table';
 import {
   useReactTable,
   getCoreRowModel,
   getSortedRowModel,
   flexRender,
   getFilteredRowModel,
   getPaginationRowModel,
-} from "@tanstack/react-table";
-import type { SortingState, ColumnDef, ColumnFiltersState } from "@tanstack/react-table";
+} from '@tanstack/react-table';
+import type {
+  SortingState,
+  ColumnDef,
+  ColumnFiltersState,
+} from '@tanstack/react-table';
+
 
 const columns: ColumnDef<any>[] = [
   {
-    id: "operation",
-    accessorFn: (row) => (
-        Object.keys(row)[0]
-    ),
-    header: () => "Operation",
+    id: 'operation',
+    accessorFn: (row) => Object.keys(row)[0],
+    header: () => 'Operation',
     enableColumnFilter: true,
-    filterFn: (row, columnId, filterValue) => {
+    filterFn: (row, _, filterValue) => {
       let operation = Object.keys(row.original)[0];
       return operation
         .toLowerCase()
-        .includes((filterValue ?? "").toLowerCase());
+        .includes((filterValue ?? '').toLowerCase());
     },
-    meta: { className: "w-1/3" },
+    enableResizing: false,
   },
   {
-    id: "implemented",
-    accessorFn: row => row[Object.keys(row)[0]].implemented,
-    header: () => "Implemented",
-    cell: ({ getValue }) => (getValue() ? "✔️" : ""),
-    meta: { className: "w-1/6" },
+    id: 'implemented',
+    accessorFn: (row) => row[Object.keys(row)[0]].implemented,
+    header: () => 'Implemented',
+    cell: ({ getValue }) => (getValue() ? '✔️' : ''),
     enableSorting: true,
+    enableResizing: false,
   },
   {
-    id: "image",
-    accessorFn: row => row[Object.keys(row)[0]].availability,
-    header: () => "Image",
-    meta: { className: "w-1/6" },
+    id: 'image',
+    accessorFn: (row) => row[Object.keys(row)[0]].availability,
+    header: () => 'Image',
     enableSorting: false,
+    enableResizing: false,
   },
 ];
 
-export default function PersistenceCoverage({service}: {service: string}) {
+export default function PersistenceCoverage({ service }: { service: string }) {
   const [coverage, setCoverage] = React.useState<any[]>([]);
   const [sorting, setSorting] = React.useState<SortingState>([
-    { id: "operation", desc: false },
+    { id: 'operation', desc: false },
   ]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
 
   React.useEffect(() => {
     const loadData = async () => {
-      const moduleData = await jsonData[`/src/data/coverage/${service}.json`]() as { default: Record<string, any> };
+      const moduleData = (await jsonData[
+        `/src/data/coverage/${service}.json`
+      ]()) as { default: Record<string, any> };
       setCoverage(moduleData.default.operations);
     };
     loadData();
@@ -69,7 +76,10 @@ export default function PersistenceCoverage({service}: {service: string}) {
   const table = useReactTable({
     data: coverage,
     columns,
-    state: { sorting, columnFilters },
+    state: { 
+      sorting, 
+      columnFilters,
+    },
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
@@ -87,39 +97,65 @@ export default function PersistenceCoverage({service}: {service: string}) {
           type="text"
           placeholder="Filter by operation name..."
           value={
-            table.getColumn("operation")?.getFilterValue() as string || ""
+            (table.getColumn('operation')?.getFilterValue() as string) || ''
           }
-          onChange={e =>
-            table.getColumn("operation")?.setFilterValue(e.target.value)
+          onChange={(e) =>
+            table.getColumn('operation')?.setFilterValue(e.target.value)
           }
           className="border rounded px-2 py-1 w-full max-w-xs"
         />
       </div>
-      <div className="rounded-md border">
-        <Table>
+      <div className="rounded-md border w-full overflow-hidden">
+        <Table 
+          className="w-full" 
+          style={{ 
+            width: '100%',
+            tableLayout: 'fixed',
+          }}
+        >
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
                   const canSort = header.column.getCanSort();
-                  const meta = header.column.columnDef.meta as { className?: string } | undefined;
+                  // Calculate percentage-based widths: Operation 60%, others 20% each
+                  const getColumnWidth = (columnId: string) => {
+                    switch (columnId) {
+                      case 'operation':
+                        return '75%';
+                      case 'implemented':
+                      case 'image':
+                        return '15%';
+                      default:
+                        return 'auto';
+                    }
+                  };
+
                   return (
                     <TableHead
                       key={header.id}
-                      onClick={canSort ? header.column.getToggleSortingHandler() : undefined}
-                      className={
-                        (meta?.className || "") +
-                        (canSort ? " cursor-pointer select-none" : "")
+                      onClick={
+                        canSort
+                          ? header.column.getToggleSortingHandler()
+                          : undefined
                       }
+                      className={canSort ? 'cursor-pointer select-none' : ''}
+                      style={{
+                        width: getColumnWidth(header.id),
+                        textAlign: header.id === 'operation' ? 'left' : 'center',
+                      }}
                     >
-                      {flexRender(header.column.columnDef.header, header.getContext())}
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
                       {canSort && (
                         <span>
-                          {header.column.getIsSorted() === "asc"
-                            ? " ▲"
-                            : header.column.getIsSorted() === "desc"
-                            ? " ▼"
-                            : ""}
+                          {header.column.getIsSorted() === 'asc'
+                            ? ' ▲'
+                            : header.column.getIsSorted() === 'desc'
+                            ? ' ▼'
+                            : ''}
                         </span>
                       )}
                     </TableHead>
@@ -132,13 +168,34 @@ export default function PersistenceCoverage({service}: {service: string}) {
             {table.getRowModel().rows.map((row) => (
               <TableRow key={row.id}>
                 {row.getVisibleCells().map((cell) => {
-                  const meta = cell.column.columnDef.meta as { className?: string } | undefined;
+                  // Same width calculation for cells
+                  const getColumnWidth = (columnId: string) => {
+                    switch (columnId) {
+                      case 'operation':
+                        return '60%';
+                      case 'implemented':
+                      case 'image':
+                        return '20%';
+                      default:
+                        return 'auto';
+                    }
+                  };
+
                   return (
                     <TableCell
                       key={cell.id}
-                      className={meta?.className || undefined}
+                      style={{
+                        width: getColumnWidth(cell.column.id),
+                        textAlign: cell.column.id === 'operation' ? 'left' : 'center',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: cell.column.id === 'operation' ? 'normal' : 'nowrap',
+                      }}
                     >
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
                     </TableCell>
                   );
                 })}
@@ -156,7 +213,8 @@ export default function PersistenceCoverage({service}: {service: string}) {
           Previous
         </button>
         <span>
-          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+          Page {table.getState().pagination.pageIndex + 1} of{' '}
+          {table.getPageCount()}
         </span>
         <button
           className="px-3 py-1 border rounded disabled:opacity-50"
@@ -168,4 +226,4 @@ export default function PersistenceCoverage({service}: {service: string}) {
       </div>
     </div>
   );
-} 
+}