Fix tooltip to show the all name

CSS - Changes to look like newest mockups
- Simplifies nested elements
- Divides nodes from lines

Remove is playable from left side

Remove nested elements in scss

Improve dropdown

Focus state

Fix scss linter
Remove not used css

Fix typo

app/views/projects/ci/builds/_build_pipeline.html.haml

 - is_playable = subject.playable? && can?(current_user, :update_build, @project)
-- if is_playable
-  = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, data: { toggle: 'tooltip', title: "#{subject.name} - play", container: '.pipeline-graph', placement: 'bottom' } do
-    = ci_icon_for_status('play')
-    .ci-status-text= subject.name
-- elsif can?(current_user, :read_build, @project)
+- if can?(current_user, :read_build, @project)
   = link_to namespace_project_build_path(subject.project.namespace, subject.project, subject), data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.pipeline-graph', placement: 'bottom' } do
     %span{class: "ci-status-icon ci-status-icon-#{subject.status}"}
       = ci_icon_for_status(subject.status)

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

@@ -4,7 +4,7 @@
     = ci_icon_for_status(group_status)
   %span.ci-status-text
     = name
-  %span.dropdown-counter-bagde= subject.size
+  %span.dropdown-counter-badge= subject.size
 .dropdown-menu.grouped-pipeline-dropdown
   .arrow
   %ul