Move todo target state to the top and fix styles on mobile

app/assets/stylesheets/pages/todos.scss

@@ -37,6 +37,9 @@
     float: none;
     display: inline-block;
     font-weight: normal;
+    padding: 0 5px;
+    line-height: inherit;
+    font-size: 14px;
   }
 
   .todo-body {
@@ -84,12 +87,11 @@
 
 @media (max-width: $screen-xs-max) {
   .todo-item {
-    padding-left: $gl-padding;
-
     .todo-title {
       white-space: normal;
       overflow: visible;
       max-width: 100%;
+      margin-bottom: 10px;
     }
 
     .avatar {

app/views/dashboard/todos/_todo.html.haml

@@ -3,6 +3,10 @@
     = image_tag avatar_icon(todo.author_email, 40), class: 'avatar s40', alt:''
     .todo-title.title
       - unless todo.build_failed?
+        - if (todo.target.is_a?(MergeRequest) || todo.target.is_a?(Issue)) && ['closed', 'merged'].include?(todo.target.state)
+          %span.target-status
+            = todo_target_state_pill(todo)
+
         %span.author-name
           - if todo.author
             = link_to_author(todo)
@@ -17,10 +21,6 @@
 
       · #{time_ago_with_tooltip(todo.created_at)}
 
-      - if (todo.target.is_a?(MergeRequest) || todo.target.is_a?(Issue)) && ['closed', 'merged'].include?(todo.target.state)
-        %span.target-status
-          = todo_target_state_pill(todo)
-
     - if todo.pending?
       .todo-actions.pull-right
         = link_to [:dashboard, todo], method: :delete, class: 'btn btn-loading done-todo' do