Revert some scrollbar, sidebar and list width changes.

Thanks to xet7 !

Fixes #5585,
fixes https://github.com/wekan/wekan/pull/5583

client/components/boards/boardBody.css

@@ -16,6 +16,9 @@
   transition: margin 0.1s;
   overflow-y: auto;
 }
+.board-wrapper .board-canvas.is-sibling-sidebar-open {
+  margin-right: 248px;
+}
 .board-wrapper .board-canvas .board-overlay {
   position: fixed;
   left: 0;

client/components/boards/boardBody.jade

@@ -17,6 +17,7 @@ template(name="boardBody")
    | {{_ 'tableVisibilityMode-allowPrivateOnly'}}
   else
     .board-wrapper(class=currentBoard.colorClass)
+      +sidebar
       .board-canvas.js-swimlanes.dragscroll(
         class="{{#if Sidebar.isOpen}}is-sibling-sidebar-open{{/if}}"
         class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}"
@@ -35,7 +36,6 @@ template(name="boardBody")
           +calendarView
         else
           +listsGroup(currentBoard)
-      +sidebar
 
 template(name="calendarView")
   if isViewCalendar

client/components/boards/boardColors.css

@@ -3269,6 +3269,11 @@ THEME - Clean Light
   color: #FFFFFF;
 }
 
+.board-color-cleanlight .list:first-child,
+.board-color-cleandark .list:first-child {
+  margin-right: -32px;
+}
+
 .board-color-cleanlight .list .list-header .list-header-menu,
 .board-color-cleandark .list .list-header .list-header-menu {
   display: flex;
@@ -3352,6 +3357,7 @@ THEME - Clean Light
 .board-color-cleanlight .swimlane,
 .board-color-cleandark .swimlane {
   background: none;
+  gap: 32px;
 }
 
 .board-color-cleanlight .swimlane-height-apply,

client/components/cards/cardDetails.css

@@ -5,7 +5,7 @@
   float: left;
   height: 30px;
   width: 30px;
-  margin: .3vh;
+  margin: 0 4px 4px 0;
   cursor: pointer;
   user-select: none;
   z-index: 1;
@@ -89,7 +89,6 @@
   box-shadow: 0 0 7px 0 #b3b3b3;
   transition: flex-basis 0.1s;
   box-sizing: border-box;
-  scrollbar-width: none;
 }
 .card-details .mCustomScrollBox {
   padding-left: 0;

client/components/lists/list.css

@@ -7,14 +7,12 @@
   border-left: 1px solid #ccc;
   padding: 0;
   float: left;
-  flex: 1;
 }
 [id^="swimlane-"] .list:first-child {
   min-width: 20px;
 }
 .list:first-child {
   border-left: none;
-  flex: none;
 }
 .card-details + .list {
   border-left: none;
@@ -33,9 +31,6 @@
   box-shadow: none;
   height: 100px;
 }
-.list.list-collapsed {
-  flex: none;
-}
 .list.list-composer .open-list-composer,
 .list .list-composer .open-list-composer {
   color: #8c8c8c;
@@ -152,7 +147,6 @@
   display: flex;
   overflow-y: auto;
   padding: 5px 11px;
-  scrollbar-width: none;
 }
 .list-body .minicards {
   flex-grow: 1;

client/components/lists/list.jade

@@ -1,6 +1,6 @@
 template(name='list')
   .list.js-list(id="js-list-{{_id}}"
-                style="{{#unless collapsed}}min-width:{{listWidth}}px;{{/unless}}"
+                style="{{#unless collapsed}}width:{{listWidth}}px;{{/unless}}"
                 class="{{#if collapsed}}list-collapsed{{/if}}")
     +listHeader
     +listBody

client/components/sidebar/sidebar.css

@@ -3,13 +3,16 @@
   top: 0;
   bottom: 0;
   right: 0;
-  overflow-y: scroll;
-  scrollbar-width: none;
 }
 .sidebar .sidebar-shadow {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
   background: #f7f7f7;
   box-shadow: -10px 0px 5px -10px #b3b3b3;
-  height: 100%;
+  z-index: 10;
 }
 .sidebar-xmark {
   position: absolute;
@@ -21,16 +24,17 @@
 .sidebar-xmark:hover {
   background: rgba(0,0,0,0.15);
 }
-.sidebar-actions {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 10px 0px 10px;
-}
 .sidebar .sidebar-content {
-  padding: 0 12px;
+  padding: 12px;
   margin-bottom: 1.6em;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 90%;
 }
 .sidebar .sidebar-content .hide-btn {
   display: none;
@@ -106,19 +110,21 @@
   margin-right: 10px;
 }
 .sidebar .sidebar-shortcuts {
+  position: absolute;
+  margin-left: 40%;
+  padding: 0;
   top: 7px;
   font-size: 0.8em;
   line-height: 1.6em;
   color: #999;
 }
 .board-sidebar {
-  display: none;
-  width: 30vw;
-  z-index: 100;
+  width: 548px;
+  right: -548px;
   transition: top 0.1s, right 0.1s, width 0.1s;
 }
 .board-sidebar.is-open {
-  display: block;
+  right: 0;
 }
 .board-widget h4 {
   margin: 5px 0;

client/components/sidebar/sidebar.jade

@@ -5,12 +5,7 @@ template(name="sidebar")
     //  title="{{showTongueTitle}}")
     //  i.fa.fa-navicon
     .sidebar-shadow
-      .sidebar-actions
-        .sidebar-shortcuts
-          a.board-header-btn.js-shortcuts(title="{{_ 'keyboard-shortcuts' }}")
-            i.fa.fa-keyboard-o
-            span {{_ 'keyboard-shortcuts' }}
-        a.sidebar-xmark.js-close-sidebar ✕
+      a.sidebar-xmark.js-close-sidebar ✕
       .sidebar-content.js-board-sidebar-content
         //a.hide-btn.js-hide-sidebar
         //  i.fa.fa-navicon
@@ -52,6 +47,11 @@ template(name="membersWidget")
         a.board-header-btn.js-open-board-menu(title="{{_ 'boardMenuPopup-title'}}")
           i.board-header-btn-icon.fa.fa-cog
           | {{_ 'boardMenuPopup-title'}}
+  .board-widget.board-widget-members
+      .sidebar-shortcuts
+        a.board-header-btn.js-shortcuts(title="{{_ 'keyboard-shortcuts' }}")
+          i.fa.fa-keyboard-o
+          span {{_ 'keyboard-shortcuts' }}
   hr
   h3
     i.fa.fa-users

client/components/swimlanes/swimlanes.css

@@ -1,3 +1,8 @@
+@media screen and (min-width: 801px) {
+  .swimlane.ui-sortable {
+    width: max-content;
+  }
+}
 [class=swimlane] {
   position: sticky;
   left: 0;
@@ -8,7 +13,6 @@
   flex-direction: row;
   overflow: auto;
   max-height: 100%;
-  scrollbar-width: none;
 }
 .swimlane-header-menu .swimlane-header-collapse-down {
   font-size: 50%;

client/components/swimlanes/swimlanes.jade

@@ -2,7 +2,7 @@ template(name="swimlane")
   .swimlane.nodragscroll
     +swimlaneHeader
   unless collapseSwimlane
-    .swimlane.js-lists.js-swimlane.dragscroll(id="swimlane-{{_id}}"
+    .swimlane.js-lists.js-swimlane(id="swimlane-{{_id}}"
                                    style="height:{{swimlaneHeight}};")
       if isMiniScreen
         if currentListIsInThisSwimlane _id

client/components/users/userAvatar.css

@@ -5,7 +5,6 @@
   float: left;
   height: 30px;
   width: 30px;
-  margin: .3vh;
   cursor: pointer;
   user-select: none;
   z-index: 1;