GLobal Styling part 1

frontend/src/config/pages/keywords.config.tsx

@@ -167,7 +167,11 @@ export const createKeywordsPageConfig = (
         ...clusterColumn,
         sortable: false, // Backend doesn't support sorting by cluster_id
         sortField: 'cluster_id',
-        render: (_value: string, row: Keyword) => row.cluster_name || '-',
+        render: (_value: string, row: Keyword) => row.cluster_name ? (
+          <Badge color="info" size="xs" variant="outline">
+            <span className="text-[11px] font-normal">{row.cluster_name}</span>
+          </Badge>
+        ) : <span className="text-gray-400">-</span>,
       },
       {
         ...difficultyColumn,

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

@@ -61,7 +61,7 @@ export const createdColumn = {
   label: 'Created',
   sortable: true,
   date: true,
-  width: '150px',
+  width: '100px',
 };
 
 export const updatedColumn = {