diff --git a/changelog.md b/changelog.md index 6ba3ae9..6c17c25 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,13 @@ # Changelog +## 2025-12-23 - 1.3.1 - fix(statuspage) +update timeline connector and dot positioning in statuspage incidents component + +- Remove global .timeline::before vertical connector and replace with per-item .update-item:not(:last-child)::after to draw connectors between dots +- Use sharedStyles.colors.border.default for the connector background instead of a theme gradient +- Adjust connector and dot offsets for desktop and mobile to align with dot size and border, improving visual alignment +- Add clarifying comments about dot dimensions and center calculations + ## 2025-12-23 - 1.3.0 - feat(statuspage) use dynamic status-based accent colors and computed card statuses; update stat card markup and incident/response displays diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 4180d43..d0f5f3f 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@uptime.link/statuspage', - version: '1.3.0', + version: '1.3.1', description: 'A catalog of web components for the UptimeLink dashboard.' } diff --git a/ts_web/elements/upl-statuspage-incidents.ts b/ts_web/elements/upl-statuspage-incidents.ts index df0bd19..4df28ae 100644 --- a/ts_web/elements/upl-statuspage-incidents.ts +++ b/ts_web/elements/upl-statuspage-incidents.ts @@ -351,21 +351,6 @@ export class UplStatuspageIncidents extends DeesElement { padding-left: 24px; } - /* Vertical connector line */ - .timeline::before { - content: ''; - position: absolute; - left: 7px; - top: 8px; - bottom: 8px; - width: 2px; - background: ${cssManager.bdTheme( - 'linear-gradient(to bottom, #e5e7eb 0%, #d1d5db 50%, #e5e7eb 100%)', - 'linear-gradient(to bottom, #27272a 0%, #3f3f46 50%, #27272a 100%)' - )}; - border-radius: 1px; - } - .update-item { position: relative; padding-left: ${unsafeCSS(sharedStyles.spacing.lg)}; @@ -377,6 +362,18 @@ export class UplStatuspageIncidents extends DeesElement { padding-bottom: 0; } + /* Vertical connector line from each dot to the next */ + /* Dot: left -22px, width 12px + border 2px*2 = 16px total, center at -14px */ + .update-item:not(:last-child)::after { + content: ''; + position: absolute; + left: -15px; + top: 18px; + bottom: 0; + width: 2px; + background: ${sharedStyles.colors.border.default}; + } + /* Timeline dot */ .update-item::before { content: ''; @@ -570,15 +567,17 @@ export class UplStatuspageIncidents extends DeesElement { padding-left: 20px; } - .timeline::before { - left: 4px; - } - .update-item::before { left: -18px; width: 10px; height: 10px; } + + /* Mobile dot: left -18px, width 10px + border 2px*2 = 14px, center at -11px */ + .update-item:not(:last-child)::after { + left: -12px; + top: 16px; + } } `, ];