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

fix(helpdesk): use single continuous timeline line instead of per-item segments

Browse Source 
The timeline line between communication entries had gaps because each
item drew its own ::before segment with fixed overlap that didn't match
the feed gap. Replace with a single continuous ::before line on the
feed container. Item dots (::after) remain per-item. Works robustly
regardless of gap size or item height.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-05 22:04:31 +02:00
parent d6835d3b7b
commit a3dedde7bf
1 changed files with 118 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -85,7 +85,6 @@
max-width: 8rem;
}
@media (max-width: 760px) {
.helpdesk-settings-rule-with-threshold {
grid-template-columns: auto 1fr;
@@ -139,7 +138,11 @@
align-items: center;
gap: calc(var(--app-spacing) * 0.5);
padding: calc(var(--app-spacing) * 0.5) calc(var(--app-spacing) * 0.75);
background: color-mix(in srgb, var(--app-muted-border-color) 15%, transparent);
background: color-mix(
in srgb,
var(--app-muted-border-color) 15%,
transparent
);
border-bottom: 1px solid var(--app-muted-border-color);
}
@@ -191,13 +194,17 @@
.helpdesk-team-widget {
border: 1px solid var(--app-muted-border-color);
border-radius: var(--app-radius, 0.375rem);
margin-bottom: calc(var(--app-spacing) * 0.5);
margin-bottom: var(--app-spacing);
}
.helpdesk-team-widget > .helpdesk-support-section-title {
margin: 0;
padding: calc(var(--app-spacing) * 0.5) calc(var(--app-spacing) * 0.75);
background: color-mix(in srgb, var(--app-muted-border-color) 15%, transparent);
background: color-mix(
in srgb,
var(--app-muted-border-color) 15%,
transparent
);
border-bottom: 1px solid var(--app-muted-border-color);
border-radius: var(--app-radius, 0.375rem) var(--app-radius, 0.375rem) 0 0;
}
@@ -210,7 +217,9 @@
overflow-x: auto;
}
.helpdesk-team-widget > .helpdesk-team-table-scroll > .helpdesk-team-ticket-table,
.helpdesk-team-widget
> .helpdesk-team-table-scroll
> .helpdesk-team-ticket-table,
.helpdesk-team-widget > .helpdesk-team-ticket-table {
border: none;
border-radius: 0;
@@ -248,7 +257,11 @@
font-weight: 700;
letter-spacing: 0.02em;
flex-shrink: 0;
background: color-mix(in srgb, var(--app-muted-border-color) 80%, transparent);
background: color-mix(
in srgb,
var(--app-muted-border-color) 80%,
transparent
);
color: var(--app-muted-color);
vertical-align: middle;
}
@@ -277,10 +290,18 @@
}
/* Column widths — consistent across all agent cards */
.helpdesk-team-col-ticket { width: 12ch; }
.helpdesk-team-col-customer { width: 22ch; }
.helpdesk-team-col-category { width: 20ch; }
.helpdesk-team-col-activity { width: 20ch; }
.helpdesk-team-col-ticket {
width: 12ch;
}
.helpdesk-team-col-customer {
width: 22ch;
}
.helpdesk-team-col-category {
width: 20ch;
}
.helpdesk-team-col-activity {
width: 20ch;
}
.helpdesk-team-ticket-table th {
text-align: left;
@@ -288,7 +309,11 @@
color: var(--app-muted-color);
padding: calc(var(--app-spacing) * 0.3) calc(var(--app-spacing) * 0.5);
border-bottom: 1px solid var(--app-muted-border-color);
background: color-mix(in srgb, var(--app-muted-border-color) 20%, transparent);
background: color-mix(
in srgb,
var(--app-muted-border-color) 20%,
transparent
);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -296,7 +321,8 @@
.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);
border-bottom: 1px solid
color-mix(in srgb, var(--app-muted-border-color) 40%, transparent);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -389,7 +415,7 @@
padding: calc(var(--app-spacing) * 0.65) calc(var(--app-spacing) * 0.75);
}
.helpdesk-team-perf-grid > :nth-child(n+2) {
.helpdesk-team-perf-grid > :nth-child(n + 2) {
border-left: 1px solid var(--app-muted-border-color);
padding-left: calc(var(--app-spacing) * 0.75);
}
@@ -399,7 +425,7 @@
grid-template-columns: minmax(0, 1fr);
}
.helpdesk-team-perf-grid > :nth-child(n+2) {
.helpdesk-team-perf-grid > :nth-child(n + 2) {
border-left: none;
padding-left: 0;
border-top: 1px solid var(--app-muted-border-color);
@@ -476,7 +502,11 @@
}
.helpdesk-team-perf-ranked-clickable.active {
background: color-mix(in srgb, var(--app-primary, #0d6efd) 12%, transparent);
background: color-mix(
in srgb,
var(--app-primary, #0d6efd) 12%,
transparent
);
}
.helpdesk-team-perf-ranked-clickable.active .helpdesk-team-perf-ranked-name {
@@ -508,14 +538,24 @@
/* Skeleton loading */
@keyframes helpdesk-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.helpdesk-skeleton {
background: linear-gradient(90deg,
background: linear-gradient(
90deg,
var(--app-border-subtle, #e9ecef) 25%,
color-mix(in srgb, var(--app-border-subtle, #e9ecef) 60%, var(--app-card-background-color, #fff)) 50%,
color-mix(
in srgb,
var(--app-border-subtle, #e9ecef) 60%,
var(--app-card-background-color, #fff)
)
50%,
var(--app-border-subtle, #e9ecef) 75%
);
background-size: 200% 100%;
@@ -643,7 +683,9 @@
cursor: help;
vertical-align: middle;
margin-left: 0.15rem;
transition: border-color 0.15s ease, color 0.15s ease;
transition:
border-color 0.15s ease,
color 0.15s ease;
}
.helpdesk-kpi-info:hover,
@@ -690,7 +732,9 @@
.helpdesk-kpi-clickable {
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease;
}
.helpdesk-kpi-clickable:hover {
@@ -698,7 +742,6 @@
box-shadow: 0 1px 4px rgb(0 0 0 / 0.06);
}
/* Uniform vertical rhythm inside tab content areas and ticket detail */
#support-content > * + *,
#sales-content > * + *,
@@ -917,6 +960,18 @@
list-style: none;
max-height: 26rem;
min-width: 0;
position: relative;
}
.helpdesk-comm-feed::before {
content: "";
position: absolute;
left: calc(1rem + 7px);
top: 1.2rem;
bottom: 1.2rem;
width: 1px;
background: color-mix(in srgb, var(--app-border, #dee2e6) 88%, transparent);
z-index: 0;
}
.helpdesk-comm-feed > li {
@@ -932,6 +987,10 @@
padding: 0.5rem 0 0;
}
#app-details-aside-section .helpdesk-comm-feed::before {
left: 7px;
}
.helpdesk-chat-row {
display: flex;
flex-direction: column;
@@ -1058,14 +1117,7 @@
color: var(--app-primary-inverse);
}
.helpdesk-chat-row--message::before {
content: "";
position: absolute;
left: var(--helpdesk-tl-x);
top: -0.45rem;
bottom: -0.45rem;
width: 1px;
background: color-mix(in srgb, var(--app-border, #dee2e6) 88%, transparent);
z-index: 0;
display: none;
}
.helpdesk-chat-row--message::after {
@@ -1103,20 +1155,7 @@
}
.helpdesk-chat-activity::before {
content: "";
position: absolute;
left: var(--helpdesk-tl-x);
top: -0.45rem;
bottom: -0.45rem;
width: 1px;
background: linear-gradient(
to bottom,
transparent 0%,
color-mix(in srgb, var(--app-border, #dee2e6) 88%, transparent) 12%,
color-mix(in srgb, var(--app-border, #dee2e6) 88%, transparent) 88%,
transparent 100%
);
z-index: 0;
display: none;
}
.helpdesk-chat-activity::after {
@@ -1305,7 +1344,9 @@
background: transparent;
cursor: pointer;
user-select: none;
transition: background-color 0.15s ease, color 0.15s ease;
transition:
background-color 0.15s ease,
color 0.15s ease;
border-right: 1px solid var(--app-border, #dee2e6);
margin: 0;
}
@@ -1586,7 +1627,7 @@
}
.helpdesk-tl-tick::before {
content: '';
content: "";
position: absolute;
top: 0;
left: 0;
@@ -1661,9 +1702,15 @@
line-height: 1;
}
.helpdesk-risk-summary-ok { color: var(--app-success, #198754); }
.helpdesk-risk-summary-warn { color: hsl(38 92% 50%); }
.helpdesk-risk-summary-critical { color: var(--app-danger, #dc3545); }
.helpdesk-risk-summary-ok {
color: var(--app-success, #198754);
}
.helpdesk-risk-summary-warn {
color: hsl(38 92% 50%);
}
.helpdesk-risk-summary-critical {
color: var(--app-danger, #dc3545);
}
.helpdesk-risk-header-label {
font-size: var(--text-sm, 0.875rem);
@@ -1701,7 +1748,7 @@
}
/* Remove bottom border from last row */
.helpdesk-risk-check:nth-last-child(-n+2) {
.helpdesk-risk-check:nth-last-child(-n + 2) {
border-bottom: none;
}
}
@@ -1719,8 +1766,12 @@
flex-shrink: 0;
}
.helpdesk-risk-icon-ok { color: var(--app-success, #198754); }
.helpdesk-risk-icon-warn { color: hsl(38 92% 50%); }
.helpdesk-risk-icon-ok {
color: var(--app-success, #198754);
}
.helpdesk-risk-icon-warn {
color: hsl(38 92% 50%);
}
.helpdesk-risk-check-label {
font-size: var(--text-sm, 0.875rem);
@@ -1815,7 +1866,9 @@
background: var(--app-card-background-color, #fff);
text-decoration: none;
color: inherit;
transition: box-shadow 0.15s ease, border-color 0.15s ease;
transition:
box-shadow 0.15s ease,
border-color 0.15s ease;
}
a.helpdesk-rec-card:hover {
@@ -1827,10 +1880,18 @@
outline-offset: -2px;
}
.helpdesk-rec-critical { border-left-color: var(--app-danger, #dc3545); }
.helpdesk-rec-high { border-left-color: hsl(25 95% 53%); }
.helpdesk-rec-medium { border-left-color: hsl(38 92% 50%); }
.helpdesk-rec-low { border-left-color: var(--app-primary, #0d6efd); }
.helpdesk-rec-critical {
border-left-color: var(--app-danger, #dc3545);
}
.helpdesk-rec-high {
border-left-color: hsl(25 95% 53%);
}
.helpdesk-rec-medium {
border-left-color: hsl(38 92% 50%);
}
.helpdesk-rec-low {
border-left-color: var(--app-primary, #0d6efd);
}
.helpdesk-rec-card-header {
display: flex;
@@ -1858,5 +1919,4 @@
line-height: 1.45;
color: var(--app-muted, #6c757d);
}
}