Various UI fixes (#3445)

* 3276 - FIxing textoverflow on menus

* 3185 - Fixing card title overlap with menu

* 2521 - Adding scrollbar to board description

* 3360 - Updating filter button overflow

* 3191 - Welcome screen scrolling fix

* Updating menu positioning for left alignment

* 3442 - Updating board switcher UI

mattermost-plugin/webapp/src/components/boardSelector.scss

@@ -52,7 +52,7 @@
 
         .head,
         .searchResults {
-            padding: 0 32px 32px;
+            padding: 0 32px 24px;
         }
 
         .searchResults {

webapp/src/components/boardsSwitcherDialog/boardSwitcherDialog.scss

@@ -7,7 +7,7 @@
 
     .CompassIcon {
         font-size: 18px;
-        color: #484848;
+        color: rgba(var(--center-channel-color-rgb), 0.56);
     }
 
     .toolbar {

webapp/src/components/kanban/kanbanCard.scss

@@ -18,7 +18,7 @@
     transition: background 100ms ease-out 0s;
 
     &:hover {
-        background-color: rgba(var(--center-channel-color-rgb), 0.1);
+        background-color: rgba(var(--center-channel-color-rgb), 0.08);
 
         .optionsMenu {
             display: block;
@@ -30,13 +30,27 @@
     }
 
     .optionsMenu {
+        background: rgb(var(--center-channel-bg-rgb), 1);
         display: none;
         position: absolute;
-        right: 0;
+        right: 12px;
 
         &.show {
             display: block;
         }
+
+        .IconButton {
+            border-radius: 3px;
+            padding: 0;
+            box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0 0 0 1px,
+                rgba(var(--center-channel-color-rgb), 0.1) 0 2px 4px;
+            height: 24px;
+            width: 24px;
+
+            &:hover {
+                background: rgb(var(--center-channel-color-rgb), 0.1);
+            }
+        }
     }
 
     .octo-tooltip {
@@ -81,15 +95,4 @@
             -webkit-box-orient: vertical; // stylelint-disable-line
         }
     }
-
-    .optionsMenu .IconButton {
-        border-radius: 3px;
-        margin-right: 12px;
-        padding: 0;
-        background: rgb(var(--center-channel-color-rgb), 0.1);
-        box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0 0 0 1px,
-            rgba(var(--center-channel-color-rgb), 0.1) 0 2px 4px;
-        height: 24px;
-        width: 24px;
-    }
 }

webapp/src/components/searchDialog/searchDialog.scss

@@ -39,14 +39,14 @@
 
         .head,
         .searchResults {
-            padding: 0 32px 32px;
+            padding: 0 32px 24px;
         }
 
         .searchResults {
             height: 100%;
             overflow-y: auto;
             overflow-x: hidden;
-            padding: 0;
+            padding: 16px 0 0;
             margin-bottom: 18px;
             border-top: solid 1px rgba(var(--center-channel-color-rgb), 0.16);
 
@@ -55,7 +55,7 @@
                 justify-content: flex-start;
                 align-items: center;
                 display: flex;
-                padding: 0 24px;
+                padding: 0 32px;
                 cursor: pointer;
                 overflow: hidden;
               
@@ -127,7 +127,7 @@
                 position: absolute;
                 left: 13px;
                 font-size: 18px;
-                top: 14px;
+                top: 12px;
                 width: 20px;
                 height: 20px;
                 opacity: 0.48;

webapp/src/components/sidebar/sidebarBoardItem.scss

@@ -160,8 +160,8 @@
 
     .Menu.noselect.left {
         position: fixed;
-        right: calc(100% - 480px + 50px);
-        left: calc(240px - 50px);
+        right: auto;
+        left: auto;
     }
 
     .boardMoveToCategorySubmenu {

webapp/src/components/viewHeader/filterEntry.scss

@@ -6,4 +6,12 @@
         display: flex;
         flex-direction: row;
     }
+
+    .Button {
+        overflow: hidden;
+        max-width: 220px;
+        text-overflow: ellipsis;
+        white-space: normal;
+        display: block;
+    }
 }

webapp/src/components/viewTitle.scss

@@ -8,6 +8,11 @@
         min-height: 28px;
     }
 
+    .description {
+        max-height: 80px;
+        overflow: auto;
+    }
+
     > .add-buttons {
         flex-direction: row;
         color: rgba(var(--center-channel-color-rgb), 0.4);

webapp/src/pages/welcome/welcomePage.scss

@@ -4,9 +4,14 @@
     flex-direction: column;
     height: 100%;
     justify-content: center;
-    padding: 0 40px;
+    padding: 80px 40px;
     text-align: center;
 
+    @media (max-height: 768px) {
+        justify-content: flex-start;
+        height: auto;
+    }
+
     > div {
         max-width: 808px;
         width: 100%;

webapp/src/widgets/menu/menu.scss

@@ -26,6 +26,11 @@
         flex-direction: column;
         padding: 8px 0;
         min-width: 240px;
+        max-width: 320px;
+    }
+
+    .view-list {
+        overflow: hidden;
     }
 
     .menu-options {
@@ -75,12 +80,19 @@
                 margin-left: 16px;
             }
 
+            .noicon {
+                &:empty {
+                    display: none;
+                }
+            }
+
             > *:first-child {
                 margin-left: 0;
             }
 
             > .menu-name {
-                display: flex;
+                overflow: hidden;
+                text-overflow: ellipsis;
                 flex-grow: 1;
                 white-space: nowrap;
             }
@@ -93,6 +105,7 @@
                 opacity: 0.56;
                 width: 18px;
                 height: 18px;
+                flex: 0 0 18px;
             }
 
             .IconButton .Icon {