Change length of connecting lines based on number of builds

app/assets/javascripts/pipeline.js.es6

 (function() {
 
   function addMarginToBuild () {
-    const $secondChild = $('.build:nth-child(2)');
-    if ($secondChild.length) {
-      $secondChild.closest('.stage-column').addClass('left-margin');
+    const $secondChildBuildNode = $('.build:nth-child(2)');
+    const $firstChildBuildNode = $secondChildBuildNode.prev('.build');
+    // const $previousBuildColumn = $secondChildBuildNode.closest('.stage-column').prev('.stage-column');
+    if ($secondChildBuildNode.length) {
+      $secondChildBuildNode.closest('.stage-column').addClass('left-margin');
+      $firstChildBuildNode.addClass('left-connector');
     }
   }
 

app/assets/stylesheets/pages/pipelines.scss

@@ -303,11 +303,26 @@
 .stage-column {
   display: inline-block;
   vertical-align: top;
-  margin-right: 48px;
+
+  &:not(:last-child) {
+    margin-right: 44px;
+  }
 
   &.left-margin {
     &:not(:first-child) {
-      margin-left: 48px;
+      margin-left: 44px;
+
+      .left-connector {
+        &::before {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: -48px;
+          border-top: 2px solid $border-color;
+          width: 48px;
+          height: 1px;
+        }
+      }
     }
   }
 
@@ -348,7 +363,10 @@
     }
 
     .build-content {
-      width: 130px;
+      width: 164px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
       .ci-status-text {
         width: 110px;