Review changes

3 files changed, 33 insertions, 8 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;
+    }
+  }
 }