adds reference to the bottom of sidebar

app/assets/stylesheets/pages/issuable.scss

@@ -94,9 +94,17 @@
   }
 
   .cross-project-reference {
-    font-weight: bold;
     color: $gl-link-color;
     
+    span {
+      white-space: nowrap;
+      width: 80%;
+      overflow: hidden;
+      position: relative;
+      display: inline-block;
+      text-overflow: ellipsis;
+    }
+
     button {
       float: right;
     }

app/views/shared/issuable/_sidebar.html.haml

@@ -54,14 +54,6 @@
           = f.collection_select :label_ids, issuable.project.labels.all, :id, :name,
             { selected: issuable.label_ids }, multiple: true, class: 'select2 js-select2', data: { placeholder: "Select labels" }
 
-    .block
-      .title
-        Cross-project reference
-      .cross-project-reference
-        %span#cross-project-reference
-          = cross_project_reference(@project, issuable)
-        = clipboard_button(clipboard_target: 'span#cross-project-reference')
-
     = render "shared/issuable/participants", participants: issuable.participants(current_user)
 
     - if current_user
@@ -77,6 +69,15 @@
             You're not receiving notifications from this thread.
           .subscribed{class: ( 'hidden' unless subscribed )}
             You're receiving notifications because you're subscribed to this thread.
+    - project_ref = cross_project_reference(@project, issuable)
+    .block
+      .title
+      .cross-project-reference
+        %span#cross-project-reference
+          References:
+          %a{href: '#', title:project_ref}
+            = project_ref
+        = clipboard_button(clipboard_target: 'span#cross-project-reference')
 
   :javascript
     new Subscription("#{toggle_subscription_path(issuable)}");