Review changes

4 files changed, 34 insertions, 9 deletions

diff --git a/app/assets/javascripts/comment_type_toggle.js b/app/assets/javascripts/comment_type_toggle.js
index de9dc5979a3..df0ba86198c 100644
--- a/app/assets/javascripts/comment_type_toggle.js
+++ b/app/assets/javascripts/comment_type_toggle.js
@@ -1,5 +1,5 @@
-import DropLab from '~/droplab/drop_lab';
-import InputSetter from '~/droplab/plugins/input_setter';
+import DropLab from './droplab/drop_lab';
+import InputSetter from './droplab/plugins/input_setter';
 
 class CommentTypeToggle {
   constructor(opts = {}) {
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 2620e31ca80..eeb97fa2ee0 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -791,7 +791,7 @@ require('./task_list');
 
       if (typeof gl.diffNotesCompileComponents !== 'undefined') {
         var $commentBtn = form.find('comment-and-resolve-btn');
-        $commentBtn.attr(':discussion-id', "'" + discussionID + "'");
+        $commentBtn.attr(':discussion-id', `'${discussionID}'`);
 
         gl.diffNotesCompileComponents();
       }
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 05b9018d21e..b637994adf8 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -312,11 +312,19 @@
 }
 
 .comment-type-dropdown {
-  .dropdown-toggle .fa {
-    color: $white-light;
-    padding-right: 2px;
-    margin-top: 2px;
-    pointer-events: none;
+  .comment-btn {
+    width: auto;
+  }
+
+  .dropdown-toggle {
+    float: right;
+
+    .toggle-icon {
+      color: $white-light;
+      padding-right: 2px;
+      margin-top: 2px;
+      pointer-events: none;
+    }
   }
 
   .dropdown-menu {
@@ -375,4 +383,21 @@
     padding: 0;
     border-top: $gray-darkest;
   }
+
+  @media (max-width: $screen-xs-max) {
+    display: flex;
+    width: 100%;
+
+    .comment-btn {
+      flex-grow: 1;
+      flex-shrink: 0;
+      width: auto;
+    }
+
+    .dropdown-toggle {
+      flex-grow: 0;
+      flex-shrink: 1;
+      width: auto;
+    }
+  }
 }
diff --git a/app/views/projects/notes/_comment_button.html.haml b/app/views/projects/notes/_comment_button.html.haml
index db18322c8eb..6bb55f04b6e 100644
--- a/app/views/projects/notes/_comment_button.html.haml
+++ b/app/views/projects/notes/_comment_button.html.haml
@@ -5,7 +5,7 @@
 
   - if @note.can_be_discussion_note?
     = button_tag type: 'button', class: 'btn btn-nr dropdown-toggle comment-btn js-note-new-discussion js-disable-on-submit', data: { 'dropdown-trigger' => '#resolvable-comment-menu' }, 'aria-label' => 'Open comment type dropdown' do
-      = icon('caret-down')
+      = icon('caret-down', class: 'toggle-icon')
 
     %ul#resolvable-comment-menu.dropdown-menu{ data: { dropdown: true } }
       %li#comment.droplab-item-selected{ data: { value: '', 'submit-text' => 'Comment', 'close-text' => "Comment & close #{noteable_name}", 'reopen-text' => "Comment & reopen #{noteable_name}" } }