Add table styling to commits tables

app/assets/stylesheets/framework/lists.scss

@@ -234,6 +234,44 @@ ul.content-list {
   }
 }
 
+// Table list
+.table-list {
+  display: table;
+  width: 100%;
+
+  .table-list-row {
+    display: table-row;
+  }
+
+  .table-list-cell {
+    display: table-cell;
+    vertical-align: top;
+    padding: 10px 16px;
+    border-bottom: 1px solid $gray-darker;
+
+    &.avatar-cell {
+      width: 36px;
+      padding-right: 0;
+
+      img {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &.table-wide {
+    .table-list-cell {
+      &:last-of-type {
+        padding-right: 0;
+      }
+
+      &:first-of-type {
+        padding-left: 0;
+      }
+    }
+  }
+}
+
 .panel > .content-list > li {
   padding: $gl-padding-top $gl-padding;
 }

app/assets/stylesheets/pages/commits.scss

@@ -142,7 +142,6 @@
 .commit-header {
   padding: 5px 10px;
   background-color: $gray-light;
-  border-top: 1px solid $gray-darker;
   border-bottom: 1px solid $gray-darker;
   font-size: 14px;
 
@@ -187,9 +186,8 @@
 
 .commit-actions {
   @media (min-width: $screen-sm-min) {
-    float: right;
-    margin-left: $gl-padding;
-    margin-top: 2px;
+    width: 300px;
+    text-align: right;
     font-size: 0;
   }
 
@@ -232,14 +230,6 @@
     vertical-align: baseline;
   }
 
-  .commit-content {
-    display: inline-block;
-
-    @media (min-width: $screen-sm-min) {
-      max-width: 70%;
-    }
-  }
-
   .commit-row-description {
     font-size: 14px;
     border-left: 1px solid $white-normal;

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

@@ -9,13 +9,12 @@
 - cache_key.push(commit.status(ref)) if commit.status(ref)
 
 = cache(cache_key, expires_in: 1.day) do
-  %li.commit.js-toggle-container{ id: "commit-#{commit.short_id}" }
+  %li.commit.table-list-row.js-toggle-container{ id: "commit-#{commit.short_id}" }
 
-    .commit-row-title
-      .image-container
+    .table-list-cell.avatar-cell.hidden-xs
       = author_avatar(commit, size: 36)
 
-      .commit-content
+    .table-list-cell.commit-content
       = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message item-title"
       %span.commit-row-message.visible-xs-inline
         ·
@@ -34,7 +33,7 @@
         committed
         #{time_ago_with_tooltip(commit.committed_date)}
 
-      .commit-actions.hidden-xs
+    .table-list-cell.commit-actions.hidden-xs
       - if commit.status(ref)
         = render_commit_status(commit, ref: ref)
       = clipboard_button(clipboard_text: commit.id)

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

@@ -11,4 +11,4 @@
       %li.warning-row.unstyled
         #{number_with_delimiter(hidden)} additional commits have been omitted to prevent performance issues.
   - else
-    %ul.content-list= render commits, project: @project, ref: @ref
+    %ul.content-list.table-list= render commits, project: @project, ref: @ref

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

@@ -4,7 +4,7 @@
 - commits.chunk { |c| c.committed_date.in_time_zone.to_date }.each do |day, commits|
   %li.commit-header= "#{day.strftime('%d %b, %Y')} #{pluralize(commits.count, 'commit')}"
   %li.commits-row
-    %ul.content-list.commit-list
+    %ul.content-list.commit-list.table-list.table-wide
       = render commits, project: project, ref: ref
 
 - if hidden > 0