32832 Remove overflow from comment form for confidential issues and vertically aligns confidential issue icon

1 files changed, 17 insertions, 2 deletions

diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 875e47cdff3..0ddaab0da14 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/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%;
   }