fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(helpdesk): simplify team dashboard visuals — remove bars and colors

Browse Source 
Remove progress bars (meaningless without a defined per-agent limit),
remove deterministic hue coloring (too noisy), and fix spacing by using
gap on a container grid instead of border-bottom on items. Avatars now
use a single neutral style. Count badges remain as the key indicator
(warning-colored when critical tickets exist). Cleaner, quieter layout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-05 19:16:42 +02:00
parent 2c2b9c17a3
commit a58c870561
2 changed files with 32 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
modules/helpdesk/web/css/helpdesk.css
View File

@@ -155,16 +155,18 @@
color: var(--app-muted-color);
}
/* Team workload — agent card with avatar */
/* Team workload — agent rows */
.helpdesk-team-agents {
display: grid;
gap: calc(var(--app-spacing) * 0.5);
}
.helpdesk-team-agent {
display: flex;
gap: calc(var(--app-spacing) * 0.65);
padding: calc(var(--app-spacing) * 0.6) 0;
border-bottom: 1px solid color-mix(in srgb, var(--app-muted-border-color) 50%, transparent);
}
.helpdesk-team-agent:last-child {
border-bottom: none;
padding: calc(var(--app-spacing) * 0.5) calc(var(--app-spacing) * 0.6);
border: 1px solid var(--app-muted-border-color);
border-radius: var(--app-radius, 0.375rem);
}
.helpdesk-team-avatar {
@@ -178,8 +180,8 @@
font-weight: 700;
letter-spacing: 0.02em;
flex-shrink: 0;
background: hsl(var(--agent-hue, 210) 55% 92%);
color: hsl(var(--agent-hue, 210) 50% 35%);
background: color-mix(in srgb, var(--app-muted-border-color) 80%, transparent);
color: var(--app-muted-color);
}
.helpdesk-team-avatar-sm {
@@ -188,11 +190,6 @@
font-size: 0.65rem;
}
.helpdesk-team-avatar-muted {
background: var(--app-muted-border-color);
color: var(--app-muted-color);
}
.helpdesk-team-agent-content {
flex: 1;
min-width: 0;
@@ -201,8 +198,7 @@
.helpdesk-team-agent-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--app-spacing) * 0.5);
gap: calc(var(--app-spacing) * 0.4);
margin-bottom: calc(var(--app-spacing) * 0.25);
}
@@ -214,11 +210,11 @@
.helpdesk-team-agent-count {
font-variant-numeric: tabular-nums;
font-weight: 600;
font-size: 0.75rem;
font-size: 0.7rem;
padding: 0.1em 0.5em;
border-radius: 999px;
background: color-mix(in srgb, var(--app-primary, #0d6efd) 12%, transparent);
color: var(--app-primary, #0d6efd);
background: color-mix(in srgb, var(--app-contrast, #000) 8%, transparent);
color: var(--app-muted-color);
}
.helpdesk-team-agent-count-warning {
@@ -231,26 +227,6 @@
color: var(--app-success, #198754);
}
/* Load bar */
.helpdesk-team-agent-bar-track {
height: 3px;
border-radius: 999px;
background: color-mix(in srgb, var(--app-muted-border-color) 50%, transparent);
margin-bottom: calc(var(--app-spacing) * 0.35);
}
.helpdesk-team-agent-bar-fill {
height: 100%;
border-radius: 999px;
background: hsl(var(--agent-hue, 210) 55% 55%);
transition: width 0.3s ease;
min-width: 2px;
}
.helpdesk-team-agent-bar-success {
background: var(--app-success, #198754);
}
/* Ticket pills */
.helpdesk-team-pills {
display: flex;
@@ -301,11 +277,7 @@
/* Compact variant for performance tab */
.helpdesk-team-agent-compact {
padding: calc(var(--app-spacing) * 0.4) 0;
}
.helpdesk-team-agent-compact .helpdesk-team-agent-bar-track {
margin-bottom: 0;
padding: calc(var(--app-spacing) * 0.4) calc(var(--app-spacing) * 0.6);
}
.helpdesk-team-performance-panel > .helpdesk-segment-control {