Multiple bug fixes (#7243)

* PLT-7320 - Fixing alignment of x icon

* PLT-7357 - Fixing close icon in compact view

* PLT-7322 - Fixing overflow for delete token modal

* PLT-7351 - Fixing flag icon alignment

* PLT-7393 - Fixing cursor on upload button

* PLT-7392 - Fixing scrollbar in admin console

* PLT-7376 - Fixing hover effect for mobile nav

webapp/components/admin_console/admin_sidebar.jsx

@@ -29,13 +29,17 @@ export default class AdminSidebar extends React.Component {
         this.updateTitle();
 
         if (!Utils.isMobile()) {
-            $('.admin-sidebar .nav-pills__container').perfectScrollbar();
+            $('.admin-sidebar .nav-pills__container').perfectScrollbar({
+                suppressScrollX: true
+            });
         }
     }
 
     componentDidUpdate() {
         if (!Utils.isMobile()) {
-            $('.admin-sidebar .nav-pills__container').perfectScrollbar();
+            $('.admin-sidebar .nav-pills__container').perfectScrollbar({
+                suppressScrollX: true
+            });
         }
     }
 

webapp/components/user_settings/user_settings_security/user_settings_security.jsx

@@ -1066,7 +1066,7 @@ export default class SecurityTab extends React.Component {
                 />
             ),
             confirmMessage: (
-                <div className='alert alert-danger'>
+                <div className='alert alert-danger word-break--all'>
                     <FormattedHTMLMessage
                         id='user.settings.tokens.confirmDeleteMessage'
                         defaultMessage='Any integrations using this token will no longer be able to access the Mattermost API. You cannot undo this action. <br /><br />Are you sure want to delete the {description} token?'

webapp/sass/layout/_navigation.scss

@@ -139,6 +139,10 @@
                     vertical-align: top;
                     width: 32px;
 
+                    &:hover {
+                        background: transparent;
+                    }
+
                     svg {
                         position: relative;
                         top: 5px;

webapp/sass/layout/_post.scss

@@ -733,6 +733,24 @@
             padding-top: 0;
         }
 
+        .attachment {
+            .attachment__body__wrap {
+                .btn-close {
+                    left: -2px;
+                }
+            }
+        }
+
+        &.post--comment {
+            .attachment {
+                .attachment__body__wrap {
+                    .btn-close {
+                        left: -13px;
+                    }
+                }
+            }
+        }
+
         .status-wrapper {
             cursor: auto;
             height: 14px;
@@ -942,6 +960,14 @@
                 border-color: $yellow;
             }
         }
+
+        .attachment {
+            .attachment__body__wrap {
+                .btn-close {
+                    left: -11px;
+                }
+            }
+        }
     }
 
     &.same--root {

webapp/sass/responsive/_tablet.scss

@@ -358,7 +358,7 @@
                     padding-top: 0;
 
                     .flag-icon__container {
-                        left: -19px;
+                        left: -21px;
                         position: absolute;
                         top: 4px;
                     }

webapp/sass/routes/_admin-console.scss

@@ -123,8 +123,10 @@
 
             input {
                 @include opacity(0);
+                cursor: pointer;
                 height: 100%;
                 left: 0;
+                padding-left: 100%;
                 position: absolute;
                 top: 0;
                 width: 100%;
@@ -355,7 +357,7 @@
     .nav-pills__container {
         @include font-smoothing(initial);
         background: #111;
-        height: calc(100% - 50px);
+        height: calc(100% - 68px);
         margin-top: 1px;
         padding-bottom: 20px;
         position: relative;