From 3c0d3bb6f4d8298f58690397790dbf97c340654c Mon Sep 17 00:00:00 2001
From: fs <fs@breadcrumb-solutions.de>
Date: Sun, 5 Apr 2026 19:51:20 +0200
Subject: [PATCH] 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>
---
 modules/helpdesk/web/css/helpdesk.css    | 15 +++++++++++++--
 modules/helpdesk/web/js/helpdesk-team.js | 10 ++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

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