Move static icon and change appearance.

MR meta details media queries.

app/assets/stylesheets/framework/issue_box.scss

@@ -5,11 +5,17 @@
  */
 
 .status-box {
+  @media (max-width: $screen-sm-max) {
+        padding: 5px 11px;
+    margin-top: 4px;
+  }
+  @media (min-width: $screen-sm-min) {
+    padding: 0 $gl-btn-padding;
+    margin-top: 5px;
+  }
   @include border-radius(3px);
   display: block;
   float: left;
-  padding: 0 $gl-btn-padding;
-  margin-top: 5px;
   margin-right: 10px;
   color: #FFF;
   font-size: $gl-font-size;

app/assets/stylesheets/pages/detail_page.scss

@@ -19,6 +19,7 @@
 
   .issue-meta {
     display: inline-block;
+    line-height: 20px;
   }
 }
 

app/assets/stylesheets/pages/issues.scss

@@ -133,3 +133,12 @@ form.edit-issue {
   color: $secondary-text;
   margin-left: 52px;
 }
+
+.editor-details {
+  @media (max-width: $screen-sm-max) {
+    display: block;
+  }
+  @media (min-width: $screen-sm-min) {
+    display: inline-block;
+  }
+}
\ No newline at end of file

app/views/projects/merge_requests/show/_mr_title.html.haml

@@ -4,16 +4,16 @@
       = @merge_request.state_human_name
     %span.hidden-sm.hidden-md.hidden-lg
       =icon(@merge_request.state_icon_name)
-
-  %span.identifier
-    Merge Request #{@merge_request.to_reference}
+  .issue-meta
+    %strong.identifier
+      Merge Request ##{@merge_request.iid}
     %span.creator
-    ·
       by
+      .editor-details
+        %strong
           =link_to_member(@project, @merge_request.author, size: 24, mobile_classes: "hidden-xs")
           =link_to_member(@project, @merge_request.author, size: 24,
             by_username: true, avatar: false)
-    ·
         = time_ago_with_tooltip(@merge_request.created_at)
 
   .issue-btn-group.pull-right