Add column widths and country badge to DX table

Set explicit widths for DX cluster table columns and display a country name badge in the DX Call column when available for improved readability and user experience.

Author: magicbug

application/views/dxcluster/index.php

@@ -256,19 +256,26 @@ function matchesBandFilter(freqKhz) {
         columnDefs: [
             {
                 targets: 0, // Time column
+                width: '8%',
                 render: function(data, type, row) {
                     return data;
                 }
             },
             {
                 targets: 1, // DX Call column
+                width: '35%',
                 render: function(data, type, row) {
                     if (type === 'display') {
                         const callsign = data;
                         const status = workedStatus[callsign];
                         let html = `<span class="dx-callsign" data-callsign="${callsign}">${callsign}</span>`;
 
                         if (status) {
+                            // Country name badge
+                            if (status.country) {
+                                html += `<span class="badge bg-secondary ms-2" title="Country: ${status.country}">${status.country}</span>`;
+                            }
+                            
                             // Worked status icon
                             if (status.worked_on_band) {
                                 html += `<i class="fas fa-check text-success ms-2" title="Worked on ${status.band}"></i>`;
@@ -293,6 +300,7 @@ function matchesBandFilter(freqKhz) {
             },
             {
                 targets: 2, // Frequency column
+                width: '12%',
                 className: 'frequency-cell',
                 render: function(data, type, row) {
                     if (type === 'display') {
@@ -301,8 +309,17 @@ className: 'frequency-cell',
                     return data;
                 }
             },
+            {
+                targets: 3, // Spotter column
+                width: '10%'
+            },
+            {
+                targets: 4, // Comment column
+                width: '25%'
+            },
             {
                 targets: 5, // Age column
+                width: '10%',
                 render: function(data, type, row) {
                     if (type === 'display') {
                         return `<span class="spot-age">${data}</span>`;