Styles styels styles

frontend/src/config/pages/content.config.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import {
   titleColumn,
   statusColumn,
-  createdColumn,
+  createdWithActionsColumn,
   wordCountColumn,
   sectorColumn,
 } from '../snippets/columns.snippets';
@@ -100,17 +100,18 @@ export const createContentPageConfig = (
         label: 'Content Idea Title',
         sortable: true,
         sortField: 'title',
+        width: '400px',
         render: (value: string, row: Content) => (
           <div>
             {handlers.onRowClick ? (
               <button
                 onClick={() => handlers.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"
               >
                 {row.title || `Content #${row.id}`}
               </button>
             ) : (
-              <div className="text-base font-light text-gray-900 dark:text-white">
+              <div className="text-sm text-gray-900 dark:text-white">
                 {row.title || `Content #${row.id}`}
               </div>
             )}
@@ -130,7 +131,6 @@ export const createContentPageConfig = (
         label: 'Type',
         sortable: true,
         sortField: 'content_type',
-        width: '110px',
         render: (value: string) => {
           const label = TYPE_LABELS[value] || value || '-';
           // Proper case: capitalize first letter only
@@ -147,7 +147,6 @@ export const createContentPageConfig = (
         label: 'Structure',
         sortable: true,
         sortField: 'content_structure',
-        width: '130px',
         render: (value: string) => {
           const label = STRUCTURE_LABELS[value] || value || '-';
           // Proper case: capitalize first letter of each word
@@ -165,16 +164,15 @@ export const createContentPageConfig = (
         key: 'cluster_name',
         label: 'Cluster',
         sortable: false,
-        width: '130px',
         render: (_value: any, row: Content) => {
           const clusterName = row.cluster_name;
           if (!clusterName) {
-            return <span className="text-gray-400 dark:text-gray-500 text-[11px]">-</span>;
+            return <span className="text-gray-400 dark:text-gray-500">-</span>;
           }
           return (
-            <Badge color="indigo" size="xs" variant="soft">
-              <span className="text-[11px] font-normal">{clusterName}</span>
-            </Badge>
+            <span className="text-gray-800 dark:text-white">
+              {clusterName}
+            </span>
           );
         },
       },
@@ -305,11 +303,11 @@ export const createContentPageConfig = (
         ),
       },
       {
-        ...createdColumn,
+        ...createdWithActionsColumn,
         sortable: true,
         sortField: 'created_at',
         label: 'Created',
-        align: 'right',
+        width: '130px',
         render: (value: string, row: Content) => {
           // Prompt icon logic (unchanged)
           const hasPrompts = row.has_image_prompts || false;
@@ -335,7 +333,7 @@ export const createContentPageConfig = (
           };
 
           return (
-            <div className="flex items-center justify-end gap-3 pr-10">
+            <div className="flex items-center gap-2">
               <span className="text-gray-700 dark:text-gray-300 whitespace-nowrap">
                 {formatRelativeDate(value)}
               </span>