fix(style): update task table column width styling (#267)

- add min-width in tasks table
- adjust title column width to be 66% of table to avoid unnecessarily truncating title

src/features/tasks/components/tasks-columns.tsx

@@ -45,16 +45,17 @@ export const tasksColumns: ColumnDef<Task>[] = [
     header: ({ column }) => (
       <DataTableColumnHeader column={column} title='Title' />
     ),
-    meta: { className: 'ps-1', tdClassName: 'ps-4' },
+    meta: {
+      className: 'ps-1 max-w-0 w-2/3',
+      tdClassName: 'ps-4',
+    },
     cell: ({ row }) => {
       const label = labels.find((label) => label.value === row.original.label)
 
       return (
         <div className='flex space-x-2'>
           {label && <Badge variant='outline'>{label.label}</Badge>}
-          <span className='max-w-32 truncate font-medium sm:max-w-72 md:max-w-124'>
-            {row.getValue('title')}
-          </span>
+          <span className='truncate font-medium'>{row.getValue('title')}</span>
         </div>
       )
     },

src/features/tasks/components/tasks-table.tsx

@@ -128,7 +128,7 @@ export function TasksTable({ data }: DataTableProps) {
         ]}
       />
       <div className='overflow-hidden rounded-md border'>
-        <Table>
+        <Table className='min-w-xl'>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>