Move discussion actions to the right for small viewports

app/assets/javascripts/notes/components/note_header.vue

@@ -62,6 +62,21 @@ export default {
 <template>
   <div class="note-header-info">
+    <div
+      v-if="includeToggle"
+      class="discussion-actions">
+      <button
+        @click="handleToggle"
+        class="note-action-button discussion-toggle-button js-vue-toggle-button"
+        type="button">
+        <i
+          :class="toggleChevronClass"
+          class="fa"
+          aria-hidden="true">
+        </i>
+        Toggle discussion
+      </button>
+    </div>
     <a :href="author.path">
       <span class="note-header-author-name">{{ author.name }}</span>
       <span class="note-headline-light">
@@ -95,20 +110,5 @@ export default {
         </i>
       </span>
     </span>
-    <div
-      v-if="includeToggle"
-      class="discussion-actions">
-      <button
-        @click="handleToggle"
-        class="note-action-button discussion-toggle-button js-vue-toggle-button"
-        type="button">
-        <i
-          :class="toggleChevronClass"
-          class="fa"
-          aria-hidden="true">
-        </i>
-        Toggle discussion
-      </button>
-    </div>
   </div>
 </template>

app/assets/stylesheets/pages/notes.scss

@@ -473,11 +473,6 @@ ul.notes {
   margin-left: 10px;
   color: $gray-darkest;
-  @include notes-media('max', $screen-md-max) {
-    float: none;
-    margin-left: 0;
-  }
-
   .btn-group > .discussion-next-btn {
     margin-left: -1px;
   }

changelogs/unreleased/move-disussion-actions-to-the-right.yml

+---
+title: Move discussion actions to the right for small viewports
+merge_request: 18476
+author: George Tsiolis
+type: changed