From a3dedde7bff9267f4ca4ae9540eeb0edd1a12df4 Mon Sep 17 00:00:00 2001 From: fs Date: Sun, 5 Apr 2026 22:04:31 +0200 Subject: [PATCH] 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) --- modules/helpdesk/web/css/helpdesk.css | 176 +++++++++++++++++--------- 1 file changed, 118 insertions(+), 58 deletions(-) diff --git a/modules/helpdesk/web/css/helpdesk.css b/modules/helpdesk/web/css/helpdesk.css index 16f7382..ee65893 100644 --- a/modules/helpdesk/web/css/helpdesk.css +++ b/modules/helpdesk/web/css/helpdesk.css @@ -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); } - }