Improved spacing on mobile

app/assets/stylesheets/pages/commits.scss

@@ -57,7 +57,7 @@
 }
 
 .commit-actions {
-  @media (min-width: $screen-md-min) {
+  @media (min-width: $screen-sm-min) {
     float: right;
     margin-left: $gl-padding;
   }
@@ -69,7 +69,11 @@
 }
 
 .commit {
-  padding: 10px 0 10px 55px;
+  padding: 10px 0 10px;
+
+  @media (min-width: $screen-sm-min) {
+    padding-left: 55px;
+  }
 
   &:not(:last-child) {
     border-bottom: 1px solid #eee;
@@ -78,6 +82,7 @@
   a,
   button {
     color: $gl-dark-link-color;
+    vertical-align: baseline;
   }
 
   .avatar {
@@ -86,7 +91,10 @@
 
   .item-title {
     display: inline-block;
-    max-width: 70%;
+
+    @media (min-width: $screen-sm-min) {
+      max-width: 70%;
+    }
   }
 
   .commit-row-description {

app/helpers/commits_helper.rb

@@ -23,7 +23,7 @@ module CommitsHelper
     source_email = clean(commit.send "#{options[:source]}_email".to_sym)
     person_email = user.try(:email) || source_email
 
-    image_tag(avatar_icon(person_email, options[:size]), class: "avatar #{"s#{options[:size]}" if options[:size]}", width: options[:size], alt: "")
+    image_tag(avatar_icon(person_email, options[:size]), class: "avatar #{"s#{options[:size]}" if options[:size]} hidden-xs", width: options[:size], alt: "")
   end
 
   def image_diff_class(diff)

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

@@ -13,10 +13,12 @@
     .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.status
+          = render_commit_status(commit, cssclass: 'visible-xs-inline')
         - if commit.description?
-          %a.text-expander.js-toggle-button ...
+          %a.text-expander.hidden-xs.js-toggle-button ...
 
-      .commit-actions
+      .commit-actions.hidden-xs
         - if commit.status
           = render_commit_status(commit, cssclass: 'btn btn-transparent')
         = clipboard_button_with_class({ clipboard_text: commit.id }, css_class: 'btn-transparent')