Add sticky confidential issue bar

app/assets/stylesheets/pages/issuable.scss

@@ -729,3 +729,34 @@
     }
   }
 }
+
+.confidential-issue-warning {
+  background-color: $gl-gray;
+  border-radius: 3px;
+  padding: $gl-btn-padding $gl-padding;
+  margin-top: $gl-padding-top;
+  font-size: 14px;
+  color: $white-light;
+
+  .fa {
+    margin-right: 8px;
+  }
+
+  a {
+    color: $white-light;
+    text-decoration: underline;
+  }
+
+  &.affix {
+    position: static;
+    width: initial;
+
+    @media (min-width: $screen-sm-min) {
+      position: sticky;
+      position: -webkit-sticky;
+      top: 60px;
+      z-index: 200;
+      @include transition(all);
+    }
+  }
+}

app/assets/stylesheets/pages/note_form.scss

@@ -103,41 +103,6 @@
   }
 }
-.confidential-issue-warning {
-  background-color: $gray-normal;
-  border-radius: 3px;
-  padding: 3px 12px;
-  margin: auto;
-  margin-top: 0;
-  text-align: center;
-  font-size: 12px;
-  align-items: center;
-
-  @media (max-width: $screen-md-max) {
-    // On smaller devices the warning becomes the fourth item in the list,
-    // rather than centering, and grows to span the full width of the
-    // comment area.
-    order: 4;
-    margin: 6px auto;
-    width: 100%;
-  }
-
-  .fa {
-    margin-right: 8px;
-  }
-}
-
-.right-sidebar-expanded {
-  .confidential-issue-warning {
-    // When the sidebar is open the warning becomes the fourth item in the list,
-    // rather than centering, and grows to span the full width of the
-    // comment area.
-    order: 4;
-    margin: 6px auto;
-    width: 100%;
-  }
-}
-
 .discussion-form {
   padding: $gl-padding-top $gl-padding $gl-padding;
   background-color: $white-light;

app/views/projects/_md_preview.html.haml

@@ -9,12 +9,6 @@
       %li
         %a.js-md-preview-button{ href: "#md-preview-holder", tabindex: -1 }
           Preview
-
-      - if defined?(@issue) && @issue.confidential?
-        %li.confidential-issue-warning
-          = icon('warning')
-          %span This is a confidential issue. Your comment will not be visible to the public.
-
       %li.pull-right
         .toolbar-group
           = markdown_toolbar_button({ icon: "bold fw", data: { "md-tag" => "**" }, title: "Add bold text" })

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

@@ -5,6 +5,13 @@
 - can_update_issue = can?(current_user, :update_issue, @issue)
 - can_report_spam = @issue.submittable_as_spam_by?(current_user)
+- if defined?(@issue) && @issue.confidential?
+  .confidential-issue-warning{ data: { spy: 'affix' } }
+    %span.confidential-issue-text
+      #{confidential_icon(@issue)} This issue is confidential.
+      %a{ href: help_page_path('user/project/issues/confidential_issues'), target: '_blank' }
+        What are confidential issues?
+
 .clearfix.detail-page-header
   .issuable-header
     .issuable-status-box.status-box.status-box-closed{ class: issue_button_visibility(@issue, false) }
@@ -19,7 +26,6 @@
       = icon('angle-double-left')
     .issuable-meta
-      = confidential_icon(@issue)
       = issuable_meta(@issue, @project, "Issue")
   .issuable-actions

changelogs/unreleased/fixed-confidential-issue-bar.yml

+---
+title: Make confidential issues more obviously confidential
+merge_request:
+author: