Merge branch '33840-revert-sticky-confidential-header' into 'master'confidential-issues-revert

Revert sticky confidential header

Closes #33840

See merge request !12307

4 files changed, 43 insertions, 37 deletions

diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index b3f310ff67d..4abad3f2697 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -729,33 +729,3 @@
     }
   }
 }
-
-.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;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index aa307414737..69fed4e6bf7 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -103,6 +103,42 @@
   }
 }
 
+.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;
diff --git a/app/views/projects/_md_preview.html.haml b/app/views/projects/_md_preview.html.haml
index 07445434cf3..d0698285f84 100644
--- a/app/views/projects/_md_preview.html.haml
+++ b/app/views/projects/_md_preview.html.haml
@@ -9,6 +9,12 @@
       %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" })
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 5f92d020eef..d909b0bfbbd 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -5,13 +5,6 @@
 - 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) }
@@ -26,6 +19,7 @@
       = icon('angle-double-left')
 
     .issuable-meta
+      = confidential_icon(@issue)
       = issuable_meta(@issue, @project, "Issue")
 
   .issuable-actions