use btn-group for up/down buttons

resources/assets/js/components/ColumnEditorAdvanced.vue

@@ -13,11 +13,10 @@
       </thead>
       <tbody>
         <tr v-for="(col, i) in columns">
-          <td>
+          <td class="btn-group">
             <a href="" :class="['btn', 'btn-outline-secondary', {disabled: i==0}]" @click.prevent="move(i, -1)">
               <v-icon class="fa-chevron-up" alt="Move Up" />
-            </a><!--
+            </a><a href="" :class="['btn', 'btn-outline-secondary', {disabled: i == (columns.length-1)}]" @click.prevent="move(i, 1)">
-            --><a href="" :class="['btn', 'btn-outline-secondary', {disabled: i == (columns.length-1)}]" @click.prevent="move(i, 1)">
               <v-icon class="fa-chevron-down" alt="Move Down" />
             </a>
           </td>
@@ -37,7 +36,7 @@
           </td>
 
           <td class="text-nowrap">
-            <a href="" :class="['btn', 'btn-outline-secondary', {disabled: i==0}]" @click.prevent="delCol(i)">
+            <a href="" :class="['mr-1', 'btn', 'btn-outline-secondary', {disabled: i==0}]" @click.prevent="delCol(i)">
               <v-icon class="fa-trash-o" alt="Delete column" />
             </a><!--
             --><a href="" class="btn btn-outline-secondary" v-if="i === columns.length - 1"
@@ -62,10 +61,6 @@
     @include pr(1);
     @include py(1);
   }
-
-  td .btn {
-    @include mr(1);
-  }
 </style>
 
 <script>