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
+    %ul.stage-column-list
       - pipeline.statuses.stages.each do |stage|
         - statuses = pipeline.statuses.where(stage: stage)
         - status = statuses.latest.status
-      .stage-column
+        %li.stage-column
           .stage-name
             %a{name: stage}
             - if stage
               = stage.titleize
           .builds-container
+            %ul
               - statuses.each do |build|
-            .build
+                %li.build
+                  .build-content
                     %span{class: "ci-status-link ci-status-icon-#{status}"}
                       = ci_icon_for_status(status)
                     = build.name