Wrap issue details to prevent content misalignment

app/assets/stylesheets/pages/detail_page.scss

@@ -16,6 +16,10 @@
   .issue_created_ago, .author_link {
     white-space: nowrap;
   }
+
+  .issue-meta {
+    margin-left: 65px
+  }
 }
 .detail-page-description {

app/views/projects/issues/show.html.haml

@@ -19,15 +19,18 @@
           = icon('pencil-square-o')
           Edit
-    .status-box{ class: "status-box-closed #{issue_button_visibility(@issue, false)}"} Closed
-    .status-box{ class: "status-box-open #{issue_button_visibility(@issue, true)}"} Open
-    %span.identifier
-      Issue ##{@issue.iid}
-    %span.creator
-      ·
-      by #{link_to_member(@project, @issue.author, size: 24)}
-      ·
-      = time_ago_with_tooltip(@issue.created_at, placement: 'bottom', html_class: 'issue_created_ago')
+    .pull-left
+      .status-box{ class: "status-box-closed #{issue_button_visibility(@issue, false)}"} Closed
+      .status-box{ class: "status-box-open #{issue_button_visibility(@issue, true)}"} Open
+
+    .issue-meta
+      %span.identifier
+        Issue ##{@issue.iid}
+      %span.creator
+        ·
+        by #{link_to_member(@project, @issue.author, size: 24)}
+        ·
+        = time_ago_with_tooltip(@issue.created_at, placement: 'bottom', html_class: 'issue_created_ago')
   .issue-details.issuable-details
     .detail-page-description.content-block