Styles styels styles

frontend/src/config/snippets/columns.snippets.ts

@@ -7,14 +7,12 @@ export const titleColumn = {
   key: 'title',
   label: 'Title',
   sortable: true,
-  width: 'auto',
 };
 
 export const keywordColumn = {
   key: 'keyword',
   label: 'Keyword',
   sortable: true,
-  width: 'auto',
 };
 
 export const statusColumn = {
@@ -22,7 +20,6 @@ export const statusColumn = {
   label: 'Status',
   sortable: true,
   badge: true,
-  width: '120px',
 };
 
 export const volumeColumn = {
@@ -30,7 +27,7 @@ export const volumeColumn = {
   label: 'Volume',
   sortable: true,
   numeric: true,
-  width: '100px',
+  align: 'center' as const,
 };
 
 export const difficultyColumn = {
@@ -38,7 +35,7 @@ export const difficultyColumn = {
   label: 'Difficulty',
   sortable: true,
   badge: true,
-  width: '120px',
+  align: 'center' as const,
 };
 
 export const countryColumn = {
@@ -46,14 +43,12 @@ export const countryColumn = {
   label: 'Country',
   sortable: true,
   badge: true,
-  width: '120px',
 };
 
 export const clusterColumn = {
   key: 'cluster',
   label: 'Cluster',
   sortable: true,
-  width: '200px',
 };
 
 export const createdColumn = {
@@ -61,7 +56,16 @@ export const createdColumn = {
   label: 'Created',
   sortable: true,
   date: true,
-  width: '100px',
+};
+
+// Combined column with date and actions in one cell
+export const createdWithActionsColumn = {
+  key: 'created_at',
+  label: 'Created',
+  sortable: true,
+  date: true,
+  align: 'left' as const,
+  hasActions: true, // Special flag to indicate this column has row actions
 };
 
 export const updatedColumn = {
@@ -69,14 +73,12 @@ export const updatedColumn = {
   label: 'Modified',
   sortable: true,
   date: true,
-  width: '150px',
 };
 
 export const actionsColumn = {
   key: 'actions',
   label: 'Actions',
   sortable: false,
-  width: '100px',
   fixed: true,
 };
 
@@ -85,13 +87,12 @@ export const wordCountColumn = {
   label: 'Words',
   sortable: true,
   numeric: true,
-  width: '120px',
+  align: 'center' as const,
 };
 
 export const sectorColumn = {
   key: 'sector_name',
   label: 'Sector',
   sortable: false,
-  width: '150px',
 };