Styles styels styles

frontend/src/config/pages/tasks.config.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import {
   titleColumn,
   statusColumn,
-  createdColumn,
+  createdWithActionsColumn,
   wordCountColumn,
   sectorColumn,
 } from '../snippets/columns.snippets';
@@ -104,6 +104,7 @@ export const createTasksPageConfig = (
         label: 'Content Idea Title',
         sortable: true,
         sortField: 'title',
+        width: '400px',
         toggleable: true,
         toggleContentKey: 'description',
         toggleContentLabel: 'Idea & Content Outline',
@@ -133,8 +134,11 @@ export const createTasksPageConfig = (
         label: 'Cluster',
         sortable: false, // Backend doesn't support sorting by cluster_id
         sortField: 'cluster_id',
-        width: '200px',
-        render: (_value: string, row: Task) => row.cluster_name || '-',
+        render: (_value: string, row: Task) => (
+          <span className="text-gray-800 dark:text-white">
+            {row.cluster_name || '-'}
+          </span>
+        ),
       },
       {
         key: 'taxonomy_name',
@@ -159,7 +163,6 @@ export const createTasksPageConfig = (
         label: 'Type',
         sortable: false, // Backend doesn't support sorting by content_type
         sortField: 'content_type',
-        width: '110px',
         render: (value: string) => {
           const label = TYPE_LABELS[value] || value || '-';
           const properCase = label.charAt(0).toUpperCase() + label.slice(1);
@@ -175,7 +178,6 @@ export const createTasksPageConfig = (
         label: 'Structure',
         sortable: true,
         sortField: 'content_structure',
-        width: '130px',
         render: (value: string) => {
           const label = STRUCTURE_LABELS[value] || value || '-';
           const properCase = label.split(/[_\s]+/).map(word => 
@@ -211,12 +213,14 @@ export const createTasksPageConfig = (
         sortable: true,
         sortField: 'word_count',
         align: 'center' as const,
+        headingAlign: 'center' as const,
         render: (value: number | null | undefined) => (value != null ? value.toLocaleString() : '-'),
       },
       {
-        ...createdColumn,
+        ...createdWithActionsColumn,
         sortable: true,
         sortField: 'created_at',
+        width: '130px',
         render: (value: string) => formatRelativeDate(value),
       },
       // Optional columns - hidden by default