Revert "Revert some scrollbar, sidebar and list width changes."

This reverts commit 096fe130f68e0d8d082d309901c75ed04285b7e2.

client/components/boards/boardBody.css

@@ -16,9 +16,6 @@
   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,7 +17,6 @@ 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}}"
@@ -36,6 +35,7 @@ template(name="boardBody")
           +calendarView
         else
           +listsGroup(currentBoard)
+      +sidebar
 
 template(name="calendarView")
   if isViewCalendar

client/components/boards/boardColors.css

@@ -3269,11 +3269,6 @@ 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;
@@ -3357,7 +3352,6 @@ 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: 0 4px 4px 0;
+  margin: .3vh;
   cursor: pointer;
   user-select: none;
   z-index: 1;
@@ -89,6 +89,7 @@
   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,12 +7,14 @@
   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;
@@ -31,6 +33,9 @@
   box-shadow: none;
   height: 100px;
 }
+.list.list-collapsed {
+  flex: none;
+}
 .list.list-composer .open-list-composer,
 .list .list-composer .open-list-composer {
   color: #8c8c8c;
@@ -147,6 +152,7 @@
   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}}width:{{listWidth}}px;{{/unless}}"
+                style="{{#unless collapsed}}min-width:{{listWidth}}px;{{/unless}}"
                 class="{{#if collapsed}}list-collapsed{{/if}}")
     +listHeader
     +listBody

client/components/sidebar/sidebar.css

@@ -3,16 +3,13 @@
   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;
-  z-index: 10;
+  height: 100%;
 }
 .sidebar-xmark {
   position: absolute;
@@ -24,17 +21,16 @@
 .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: 12px;
+  padding: 0 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;
@@ -110,21 +106,19 @@
   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 {
-  width: 548px;
-  right: -548px;
+  display: none;
+  width: 30vw;
+  z-index: 100;
   transition: top 0.1s, right 0.1s, width 0.1s;
 }
 .board-sidebar.is-open {
-  right: 0;
+  display: block;
 }
 .board-widget h4 {
   margin: 5px 0;

client/components/sidebar/sidebar.jade

@@ -5,7 +5,12 @@ template(name="sidebar")
     //  title="{{showTongueTitle}}")
     //  i.fa.fa-navicon
     .sidebar-shadow
-      a.sidebar-xmark.js-close-sidebar ✕
+      .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 ✕
       .sidebar-content.js-board-sidebar-content
         //a.hide-btn.js-hide-sidebar
         //  i.fa.fa-navicon
@@ -47,11 +52,6 @@ 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,8 +1,3 @@
-@media screen and (min-width: 801px) {
-  .swimlane.ui-sortable {
-    width: max-content;
-  }
-}
 [class=swimlane] {
   position: sticky;
   left: 0;
@@ -13,6 +8,7 @@
   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(id="swimlane-{{_id}}"
+    .swimlane.js-lists.js-swimlane.dragscroll(id="swimlane-{{_id}}"
                                    style="height:{{swimlaneHeight}};")
       if isMiniScreen
         if currentListIsInThisSwimlane _id

client/components/users/userAvatar.css

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