Styles styels styles

frontend/src/config/pages/approved.config.tsx

@@ -62,17 +62,18 @@ export function createApprovedPageConfig(params: {
       label: 'Content Idea Title',
       sortable: true,
       sortField: 'title',
+      width: '400px',
       render: (value: string, row: Content) => (
         <div className="flex items-center gap-2">
           {params.onRowClick ? (
             <button
               onClick={() => params.onRowClick!(row)}
-              className="text-base font-light text-brand-500 hover:text-brand-600 hover:underline text-left transition-colors"
+              className="text-sm text-brand-500 hover:text-brand-600 hover:underline text-left transition-colors"
             >
               {value || `Content #${row.id}`}
             </button>
           ) : (
-            <span className="text-base font-light text-gray-900 dark:text-white">
+            <span className="text-sm text-gray-900 dark:text-white">
               {value || `Content #${row.id}`}
             </span>
           )}
@@ -95,7 +96,6 @@ export function createApprovedPageConfig(params: {
       label: 'Status',
       sortable: true,
       sortField: 'status',
-      width: '130px',
       render: (value: string, row: Content) => {
         // Map internal status to user-friendly labels
         const statusConfig: Record<string, { color: 'success' | 'blue' | 'amber' | 'gray'; label: string }> = {
@@ -251,8 +251,8 @@ export function createApprovedPageConfig(params: {
       sortable: false, // Backend doesn't support sorting by word_count
       sortField: 'word_count',
       numeric: true,
-      width: '100px',
-      align: 'right' as const,
+      align: 'center' as const,
+      headingAlign: 'center' as const,
       render: (value: number) => (
         <span className="text-gray-900 dark:text-white">
           {value ? value.toLocaleString() : '-'}
@@ -265,7 +265,8 @@ export function createApprovedPageConfig(params: {
       sortable: true,
       sortField: 'created_at',
       date: true,
-      width: '140px',
+      width: '130px',
+      hasActions: true,
       render: (value: string) => (
         <span className="text-gray-600 dark:text-gray-400">
           {formatRelativeDate(value)}