fix(helpdesk): use single continuous timeline line instead of per-item segments
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:
@@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user