Improved the mobile UI

app/assets/javascripts/boards/boards_bundle.js.es6

@@ -33,6 +33,8 @@ $(function () {
 
             if (list.type === 'done') {
               list.position = 9999999;
+            } else if (list.type === 'backlog') {
+              list.position = -1;
             }
           });
 

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

@@ -36,7 +36,7 @@
     },
     ready: function () {
       const options = _.extend({
-        sort: false,
+        // sort: false,
         group: 'issues',
         disabled: this.disabled,
         onAdd: function (e) {

app/assets/javascripts/boards/mixins/sortable_default_options.js.es6

@@ -4,12 +4,12 @@
   }
 
   gl.boardSortableDefaultOptions = {
-    animation: 150,
     forceFallback: true,
     fallbackClass: 'is-dragging',
+    fallbackOnBody: true,
     ghostClass: 'is-ghost',
-    scrollSensitivity: 150,
-    scrollSpeed: 50,
+    scrollSensitivity: 50,
+    scrollSpeed: 10,
     onStart: function () {
       document.body.classList.add('is-dragging');
     },

app/assets/stylesheets/pages/boards.scss

@@ -69,21 +69,30 @@
   display: flex;
   -webkit-flex: 1;
   flex: 1;
-  min-height: 455px;
+  min-height: calc(100vh - 152px);
   padding-top: 25px;
   padding-right: ($gl-padding / 2);
   padding-left: ($gl-padding / 2);
   overflow-x: scroll;
+
+  @media (min-width: $screen-sm-min) {
+    min-height: 455px;
+  }
 }
 
 .board {
   display: -webkit-flex;
   display: flex;
-  min-width: 400px;
-  max-width: 400px;
+  min-width: calc(100vw - 15px);
+  max-width: calc(100vw - 15px);
   margin-bottom: 25px;
   padding-right: ($gl-padding / 2);
   padding-left: ($gl-padding / 2);
+
+  @media (min-width: $screen-sm-min) {
+    min-width: 400px;
+    max-width: 400px;
+  }
 }
 
 .board-inner {