fix(helpdesk): consistent table columns across agent cards via colgroup

Use table-layout:fixed with colgroup defining column widths in ch units.
Every agent card table gets the same colgroup, ensuring identical column
alignment across all cards. Ticket (9ch), Customer (22ch), Category
(16ch), Activity (11ch) are fixed; Description takes remaining space
with ellipsis. All cells get overflow:hidden + text-overflow:ellipsis.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-05 19:51:20 +02:00
parent 3123b8aa77
commit 3c0d3bb6f4
2 changed files with 23 additions and 2 deletions

View File

@@ -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 */

View File

@@ -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'));