fix(statuspage): update timeline connector and dot positioning in statuspage incidents component

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
 

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.'
 }

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;
+        }
       }
     `,
   ];