Merge branch '32832-confidential-issue-overflow' into 'master'

app/assets/stylesheets/pages/note_form.scss

@@ -111,13 +111,28 @@
   margin-top: 0;
   text-align: center;
   font-size: 12px;
+  align-items: center;
 
-  @media (max-width: $screen-sm-max) {
+  @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;
-    -webkit-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%;
   }

changelogs/unreleased/32832-confidential-issue-overflow.yml

+---
+title: Remove overflow from comment form for confidential issues and vertically aligns
+  confidential issue icon
+merge_request:
+author: