Align avatar and text within commit row

app/assets/stylesheets/pages/commits.scss

@@ -80,9 +80,14 @@
 
 .commit {
   padding: 10px 0;
+  position: relative;
 
   @media (min-width: $screen-sm-min) {
-    padding-left: 46px;
+    padding-left: 20px;
+
+    .commit-info-block {
+      padding-left: 44px;
+    }
   }
 
   &:not(:last-child) {
@@ -95,8 +100,11 @@
     vertical-align: baseline;
   }
 
+
   .avatar {
-    margin-left: -46px;
+    position: absolute;
+    top: 10px;
+    left: 16px;
   }
 
   .item-title {

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

@@ -10,6 +10,7 @@
 = cache(cache_key) do
   %li.commit.js-toggle-container{ id: "commit-#{commit.short_id}" }
     = commit_author_avatar(commit, size: 36)
+    .commit-info-block
       .commit-row-title
         %span.item-title
           = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message"