improve design for commits list and update the CHANGELOG

CHANGELOG

@@ -11,6 +11,7 @@ v 8.8.0 (unreleased)
   - Display informative message when new milestone is created
   - Replace Devise Async with Devise ActiveJob integration. !3902 (Connor Shea)
   - Allow "NEWS" and "CHANGES" as alternative names for CHANGELOG. !3768 (Connor Shea)
+  - Improve design of commits list
   - Added button to toggle whitespaces changes on diff view
   - Backport GitLab Enterprise support from EE
   - Files over 5MB can only be viewed in their raw form, files over 1MB without highlighting !3718

app/assets/stylesheets/pages/commit.scss

@@ -2,6 +2,11 @@
   display: block;
 }
+.commit-row {
+  display: inline-block;
+  width: 70%;
+}
+
 .commit-header {
   background-color: $background-color;
@@ -10,6 +15,16 @@
   }
 }
+.pull-right {
+  .commit_short_id, .ci-status-link, {
+    padding: 0 5px;
+  }
+
+  .browse-code {
+    margin: 0 5px;
+  }
+}
+
 .commit-author, .commit-committer {
   display: block;
   color: #999;

app/helpers/commits_helper.rb

@@ -105,21 +105,21 @@ module CommitsHelper
           "Browse File »",
           namespace_project_blob_path(project.namespace, project,
                                       tree_join(commit.id, @path)),
-          class: "pull-right"
+          class: "browse-code btn"
         )
       elsif @path.present?
         return link_to(
           "Browse Directory »",
           namespace_project_tree_path(project.namespace, project,
                                       tree_join(commit.id, @path)),
-          class: "pull-right"
+          class: "browse-code btn"
         )
       end
     end
     link_to(
       "Browse Files",
       namespace_project_tree_path(project.namespace, project, commit),
-      class: "pull-right"
+      class: "browse-code btn"
     )
   end

app/views/projects/commits/_commit.html.haml

@@ -10,26 +10,27 @@
 = cache(cache_key) do
   %li.commit.js-toggle-container{ id: "commit-#{commit.short_id}" }
     = commit_author_avatar(commit, size: 30)
-    .commit-row-title
-      %span.item-title
-        = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message"
-        - if commit.description?
-          %a.text-expander.js-toggle-button ...
-      .pull-right
-        - if commit.status
-          = render_ci_status(commit)
-        = clipboard_button(clipboard_text: commit.id)
-        = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id"
+    .commit-row
+      %span.commit-row-title
+        %span.item-title
+          = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message"
+          - if commit.description?
+            %a.text-expander.js-toggle-button ...
+      .commit-row-info
+        = commit_author_link(commit, avatar: false)
+        authored
+        .committed_ago
+          #{time_ago_with_tooltip(commit.committed_date)}  
+
+    .pull-right
+      - if commit.status
+        = render_ci_status(commit)
+      = clipboard_button(clipboard_text: commit.id)
+      = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id"
+      = link_to_browse_code(project, commit)
     - if commit.description?
       .commit-row-description.js-toggle-content
         %pre
           = preserve(markdown(escape_once(commit.description), pipeline: :single_line))
-
-    .commit-row-info
-      = commit_author_link(commit, avatar: false)
-      authored
-      .committed_ago
-        #{time_ago_with_tooltip(commit.committed_date)}  
-      = link_to_browse_code(project, commit)