diff --git a/modules/helpdesk/web/css/helpdesk.css b/modules/helpdesk/web/css/helpdesk.css index 317d0b5..4b53778 100644 --- a/modules/helpdesk/web/css/helpdesk.css +++ b/modules/helpdesk/web/css/helpdesk.css @@ -182,7 +182,7 @@ color: var(--app-muted-color); } - /* Ticket table inside agent widget — bordered like table widgets */ + /* Ticket table inside agent widget */ .helpdesk-team-ticket-table { width: 100%; font-size: var(--text-sm, 0.875rem); @@ -190,8 +190,15 @@ border-radius: var(--app-radius, 0.375rem); border-spacing: 0; overflow: hidden; + table-layout: fixed; } + /* Column widths — consistent across all agent cards */ + .helpdesk-team-col-ticket { width: 9ch; } + .helpdesk-team-col-customer { width: 22ch; } + .helpdesk-team-col-category { width: 16ch; } + .helpdesk-team-col-activity { width: 11ch; } + .helpdesk-team-ticket-table th { text-align: left; font-weight: 500; @@ -204,6 +211,9 @@ .helpdesk-team-ticket-table td { padding: calc(var(--app-spacing) * 0.35) calc(var(--app-spacing) * 0.5); border-bottom: 1px solid color-mix(in srgb, var(--app-muted-border-color) 40%, transparent); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .helpdesk-team-ticket-table tbody tr:last-child td { @@ -218,6 +228,8 @@ } .helpdesk-team-ticket-customer { + overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } @@ -230,7 +242,6 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - max-width: 18ch; } /* Links */ diff --git a/modules/helpdesk/web/js/helpdesk-team.js b/modules/helpdesk/web/js/helpdesk-team.js index 3f708df..141f635 100644 --- a/modules/helpdesk/web/js/helpdesk-team.js +++ b/modules/helpdesk/web/js/helpdesk-team.js @@ -129,6 +129,16 @@ if (container) { const tickets = m.open_ticket_details || []; if (tickets.length > 0) { const table = h('table', 'helpdesk-team-ticket-table'); + + // Colgroup for consistent column widths across all agent cards + const colgroup = document.createElement('colgroup'); + colgroup.appendChild(h('col', 'helpdesk-team-col-ticket')); + colgroup.appendChild(h('col', 'helpdesk-team-col-customer')); + colgroup.appendChild(h('col', 'helpdesk-team-col-description')); + colgroup.appendChild(h('col', 'helpdesk-team-col-category')); + colgroup.appendChild(h('col', 'helpdesk-team-col-activity')); + table.appendChild(colgroup); + const thead = h('thead'); const headRow = h('tr'); headRow.appendChild(h('th', '', container.dataset.labelTicket || 'Ticket'));