From b31d024851351c9d3b14f1fdfaa2aedbd370f46d Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 4 Mar 2020 15:25:03 +0100
Subject: [PATCH] Horizontal scrollbar layout

---
 www/kanban/app-kanban.less | 29 ++++++++++++++++++++++-------
 www/kanban/inner.js        |  5 ++++-
 www/kanban/jkanban.css     |  7 -------
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less
index bc25086b6..ab1a84359 100644
--- a/www/kanban/app-kanban.less
+++ b/www/kanban/app-kanban.less
@@ -98,6 +98,7 @@
         flex: 1;
         display: flex;
         flex-flow: column;
+        overflow-x: hidden;
     }
     #cp-app-kanban-editor {
         flex: 1;
@@ -108,30 +109,33 @@
     }
     #cp-app-kanban-content {
         flex: 1;
-        overflow-y: auto;
         display: flex;
         flex-flow: column;
+        max-height: 100%;
+        overflow-x: auto;
         .kanban-container-outer {
             flex: 1;
             display: flex;
             align-items: center;
-            min-height: -webkit-min-content;
-            min-height: min-content;
+            min-height: 0;
             .kanban-container {
                 flex: 1;
                 display: flex;
-                flex-wrap: wrap;
                 justify-content: space-around;
+                max-height: 100%;
             }
         }
         #kanban-trash {
-            width: 100px;
             height: 100px;
-            align-self: end;
             font-size: 40px;
             display: flex;
             align-items: center;
             justify-content: center;
+            position: relative;
+            width: 100%;
+            i {
+                position: fixed;
+            }
             &.kanban-trash-active {
                 color: red;
                 border: 1px solid red;
@@ -147,6 +151,9 @@
             align-items: center;
             justify-content: space-between;
             padding: 10px 5px 10px 10px;
+            &.new-item {
+                padding: 10px;
+            }
             .kanban-item-text {
                 cursor: text;
                 overflow-wrap: anywhere;
@@ -157,6 +164,13 @@
         .kanban-board {
             background-color: #eaeaea;
             color: @cryptpad_text_col;
+            main {
+                min-height: 0;
+                padding: 0 10px;
+                margin: 10px 0;
+                flex: 1;
+                overflow-y: auto;
+            }
             header {
                 display: flex;
                 align-items: center;
@@ -177,7 +191,8 @@
                 }
             }
             footer {
-                padding: 10px;
+                margin: 10px;
+                margin-top: 0px;
                 span {
                     .tools_unselectable();
                     outline: none;
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index abee5400e..9492fc1d0 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -607,6 +607,9 @@ define([
                 var $input = getInput().val(name).appendTo($item);
                 kanban.addForm(boardId, $item[0]);
                 $input.focus();
+                setTimeout(function () {
+                    $input[0].scrollIntoView();
+                });
                 var save = function () {
                     $item.remove();
                     kanban.inEditMode = false;
@@ -624,7 +627,7 @@ define([
                         e.stopPropagation();
                         save();
                         if (!$input.val()) { return; }
-                        $(el).closest('.kanban-board').find('.kanban-title-button.fa-plus').click();
+                        $(el).closest('.kanban-board').find('footer .kanban-title-button').click();
                         return;
                     }
                     if (e.which === 27) {
diff --git a/www/kanban/jkanban.css b/www/kanban/jkanban.css
index 513c16d54..b55106958 100644
--- a/www/kanban/jkanban.css
+++ b/www/kanban/jkanban.css
@@ -4,7 +4,6 @@
 
 .kanban-board {
     position: relative;
-    float: left;
     transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
     margin: 10px;
     vertical-align: top;
@@ -45,17 +44,11 @@
     padding: .25rem .5rem;
 }
 
-.kanban-board .kanban-drag {
-    min-height: 200px;
-    padding: 20px;
-    flex: 1;
-}
 
 .kanban-item {
     background: #fff;
     padding: 15px;
     margin-bottom: 20px;
-    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .kanban-item:hover {