Truncate build and stage names

CHANGELOG

@@ -108,6 +108,7 @@ v 8.11.0 (unreleased)
   - Speed up and reduce memory usage of Commit#repo_changes, Repository#expire_avatar_cache and IrkerWorker
   - Add unfold links for Side-by-Side view. !5415 (Tim Masliuchenko)
   - Adds support for pending invitation project members importing projects
+  - Add pipeline visualization/graph on pipeline page
   - Update devise initializer to turn on changed password notification emails. !5648 (tombell)
   - Avoid to show the original password field when password is automatically set. !5712 (duduribeiro)
   - Fix importing GitLab projects with an invalid MR source project

app/assets/stylesheets/pages/pipelines.scss

@@ -258,6 +258,10 @@
   .stage-name {
     margin-bottom: 15px;
     font-weight: bold;
+    width: 150px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .build {
@@ -266,12 +270,15 @@
     padding: 6px 10px;
     border-radius: 30px;
     width: 150px;
-    // TODO truncate text within .build div; not on build div itself
-    // white-space: nowrap;
-    // overflow: hidden;
-    // text-overflow: ellipsis;
     margin-bottom: 10px;
 
+    .build-content {
+      width: 130px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     svg {
       position: relative;
       top: 2px;

app/views/projects/commit/_pipeline.html.haml

 .row-content-block.white
 
   .pipeline-visualization
-    - pipeline.statuses.stages.each do |stage|
-      - statuses = pipeline.statuses.where(stage: stage)
-      - status = statuses.latest.status
-      .stage-column
-        .stage-name
-          %a{name: stage}
-          - if stage
-            = stage.titleize
-        .builds-container
-          - statuses.each do |build|
-            .build
-              %span{class: "ci-status-link ci-status-icon-#{status}"}
-                = ci_icon_for_status(status)
-              = build.name
+    %ul.stage-column-list
+      - pipeline.statuses.stages.each do |stage|
+        - statuses = pipeline.statuses.where(stage: stage)
+        - status = statuses.latest.status
+        %li.stage-column
+          .stage-name
+            %a{name: stage}
+            - if stage
+              = stage.titleize
+          .builds-container
+            %ul
+              - statuses.each do |build|
+                %li.build
+                  .build-content
+                    %span{class: "ci-status-link ci-status-icon-#{status}"}
+                      = ci_icon_for_status(status)
+                    = build.name
 
 .row-content-block.build-content.middle-block
   .pull-right