Merge pull request #4330 from mfilser/list_not_moveable_when_lists_require_scrolling

Lists now moveable when swimlane requires scrolling

client/components/lists/list.styl

@@ -4,7 +4,6 @@
   box-sizing: border-box
   display: flex
   flex-direction: column
-  flex: 0 0 270px
   position: relative
   // Even if this background color is the same as the body we can't leave it
   // transparent, because that won't work during a list drag.
@@ -12,6 +11,8 @@
   border-left: 1px solid darken(white, 20%)
   padding: 0
   float: left
+  min-width: 270px
+  max-width: 270px
 
   &:first-child
     margin-left: 5px

client/components/swimlanes/swimlanes.js

@@ -54,6 +54,7 @@ function initSortable(boardComponent, $listsDom) {
   };
 
   $listsDom.sortable({
+    connectWith: '.board-canvas',
     tolerance: 'pointer',
     helper: 'clone',
     items: '.js-list:not(.js-list-composer)',
@@ -61,6 +62,7 @@ function initSortable(boardComponent, $listsDom) {
     distance: 7,
     start(evt, ui) {
       ui.placeholder.height(ui.helper.height());
+      ui.placeholder.width(ui.helper.width());
       EscapeActions.executeUpTo('popup-close');
       boardComponent.setIsDragging(true);
     },

client/components/swimlanes/swimlanes.styl

@@ -36,6 +36,11 @@
 // Minimize swimlanes end https://www.w3schools.com/howto/howto_js_accordion.asp
 */
 
+@media screen and (min-width: 801px)
+  .swimlane.ui-sortable
+    // swimlane must have max width, otherwise lists are not sortable if there are too much lists and the swimlane "scrollable"
+    width: max-content
+
 [class=swimlane]
   position: sticky
   left: 0