diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index a80879ebf..ca394b9bb 100644 --- a/client/components/lists/list.styl +++ b/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 diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js index b8a94cbff..59d3c231c 100644 --- a/client/components/swimlanes/swimlanes.js +++ b/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); }, diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl index 48fc57940..c57e0ec41 100644 --- a/client/components/swimlanes/swimlanes.styl +++ b/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