Added note about width of sidebar

Changed CSS transition property for only values that change

app/assets/javascripts/boards/components/board.js.es6

@@ -45,11 +45,15 @@
           const issue = this.list.findIssue(this.detailIssue.issue.id);
           if (issue) {
+            const offsetLeft = this.$el.offsetLeft;
             const boardsList = document.querySelectorAll('.boards-list')[0];
-            const left = boardsList.scrollLeft - this.$el.offsetLeft;
-            let right = (this.$el.offsetLeft + this.$el.offsetWidth);
+            const left = boardsList.scrollLeft - offsetLeft;
+            let right = (offsetLeft + this.$el.offsetWidth);
             if (window.innerWidth > 768 && boardsList.classList.contains('is-compact')) {
+              // -290 here because width of boardsList is animating so therefore
+              // getting the width here is incorrect
+              // 290 is the width of the sidebar
               right -= (boardsList.offsetWidth - 290);
             } else {
               right -= boardsList.offsetWidth;
@@ -58,11 +62,11 @@
             if (right - boardsList.scrollLeft > 0) {
               $(boardsList).animate({
                 scrollLeft: right
-              }, 200);
+              }, this.sortableOptions.animation);
             } else if (left > 0) {
               $(boardsList).animate({
-                scrollLeft: this.$el.offsetLeft
-              }, 200);
+                scrollLeft: offsetLeft
+              }, this.sortableOptions.animation);
             }
           }
         },
@@ -75,7 +79,7 @@
       }
     },
     mounted () {
-      const options = gl.issueBoards.getBoardSortableDefaultOptions({
+      this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({
         disabled: this.disabled,
         group: 'boards',
         draggable: '.is-draggable',
@@ -94,7 +98,7 @@
         }
       });
-      this.sortable = Sortable.create(this.$el.parentNode, options);
+      this.sortable = Sortable.create(this.$el.parentNode, this.sortableOptions);
     },
   });
 })();

app/assets/stylesheets/pages/boards.scss

@@ -343,7 +343,8 @@
 .right-sidebar.right-sidebar-expanded {
   &.boards-sidebar-slide-enter-active,
   &.boards-sidebar-slide-leave-active {
-    transition: all .2s;
+    transition: width .2s,
+                padding .2s;
   }
   &.boards-sidebar-slide-enter,