Bug fixes (#5218)

* PLT-5319 - Fixing text alignment security modal

* PLT-5280 - Fixing add comment button in RHS mobile

* PLT-5397 - Fixing Floating timestamp on mobile

* PLT-5129 - Hiding formatting help text

* PLT-5242 - Adjusting team sidebar border on IE!!

* PLT-5226 - Placing settings toggle over header

* PLT-5222 - Placed team description tooltip on top

* PLT-5201 - Account settings overlap on mobile

* PLT-5138 - Adding bg to pending post actions

* PLT-5286 - Adjusting play button on youtube videos

* PLT-5313 - Adjusting space between emoji reactions

* PLT-5187 - Adjusting text in channel switcher

* PLT-5399 - Reverting button alignment in modal

8 files changed, 148 insertions, 122 deletions

diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss
index e1e35ea29..86e7c0a28 100644
--- a/webapp/sass/components/_mentions.scss
+++ b/webapp/sass/components/_mentions.scss
@@ -21,6 +21,13 @@
     width: 100%;
     z-index: 101;
 
+    .status {
+        font-size: 15px;
+        text-align: center;
+        vertical-align: bottom;
+        width: 20px;
+    }
+
     .fa-user {
         position: relative;
         top: -1px;
diff --git a/webapp/sass/components/_videos.scss b/webapp/sass/components/_videos.scss
index 93ad5707b..16e3468d1 100644
--- a/webapp/sass/components/_videos.scss
+++ b/webapp/sass/components/_videos.scss
@@ -1,93 +1,95 @@
 @charset 'UTF-8';
 
-.video-div {
-    margin-bottom: 8px;
-    max-width: 480px;
-    position: relative;
+.post {
+    .video-div {
+        margin-bottom: 8px;
+        max-width: 480px;
+        position: relative;
 
-    .video-thumbnail {
-        height: auto;
-        max-width: 100%;
-    }
+        .video-thumbnail {
+            height: auto;
+            max-width: 100%;
+        }
+
+        .video-thumbnail__error {
+            height: 100%;
+            line-height: 2;
+            padding: 110px 0;
+            text-align: center;
+            width: 100%;
 
-    .video-thumbnail__error {
-        height: 100%;
-        line-height: 2;
-        padding: 110px 0;
-        text-align: center;
-        width: 100%;
+            .fa {
+                @include opacity(.5);
+            }
 
-        .fa {
-            @include opacity(.5);
+            div {
+                font-size: 1.2em;
+            }
         }
 
-        div {
-            font-size: 1.2em;
+        .block {
+            background-color: alpha-color($black, .5);
+            border-radius: 10px;
+            height: 150px;
+            left: 50%;
+            margin: -75px 0 0 -100px;
+            position: absolute;
+            top: 50%;
+            width: 200px;
         }
     }
 
-    .block {
-        background-color: alpha-color($black, .5);
-        border-radius: 10px;
-        height: 150px;
-        left: 50%;
-        margin: -75px 0 0 -100px;
-        position: absolute;
-        top: 50%;
-        width: 200px;
+    .video-type {
+        @include opacity(.8);
+        font-size: 15px;
+        margin: 0;
+        padding: 0;
     }
-}
-
-.video-type {
-    @include opacity(.8);
-    font-size: 15px;
-    margin: 0;
-    padding: 0;
-}
-
-.video-title {
-    font-size: 15px;
-    margin-top: 3px;
-}
 
-.play-button {
-    @include border-radius(14px);
-    border: 4px solid alpha-color($white, .4);
-    height: 100px;
-    position: absolute;
-    right: 51px;
-    top: 26px;
-    width: 100px;
+    .video-title {
+        font-size: 15px;
+        margin-top: 3px;
+    }
 
-    span {
-        border-bottom: 36px solid transparent;
-        border-left: 60px solid alpha-color($white, .4);
-        border-top: 36px solid transparent;
-        height: 0;
-        left: 20px;
+    .play-button {
+        @include border-radius(14px);
+        border: 4px solid alpha-color($white, .4);
+        height: 100px;
         position: absolute;
-        top: 10px;
-        width: 0;
+        right: 51px;
+        top: 26px;
+        width: 100px;
+
+        span {
+            border-bottom: 36px solid transparent;
+            border-left: 60px solid alpha-color($white, .4);
+            border-top: 36px solid transparent;
+            height: 0;
+            left: 20px;
+            position: absolute;
+            top: 10px;
+            width: 0;
+        }
     }
-}
 
-.img-div {
-    -moz-force-broken-image-icon: 1;
-    border-radius: 5px;
-    margin-bottom: 8px;
-    max-height: 500px;
-    max-width: 450px;
-    position: relative;
+    .img-div {
+        -moz-force-broken-image-icon: 1;
+        border-radius: 5px;
+        margin-bottom: 8px;
+        max-height: 500px;
+        max-width: 450px;
+        position: relative;
 
-    &.placeholder {
-        height: 500px;
+        &.placeholder {
+            height: 500px;
+        }
+
+        .sidebar--right & {
+            max-width: 100%;
+        }
     }
 
-    .sidebar--right & {
-        max-width: 100%;
+    .video-loading {
+        height: 360px;
     }
 }
-
-.video-loading {
-    height: 360px;
-}
\ No newline at end of file
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index 710a8ad6a..ca5597bf9 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -275,8 +275,9 @@
         .sidebar-header-dropdown,
         .admin-navbar-dropdown {
             font-size: .85em;
-            position: absolute;
+            left: 0;
             margin-right: -15px;
+            position: absolute;
             right: 22px;
             top: 10px;
             z-index: 5;
@@ -287,16 +288,19 @@
                 @include single-transition(all, .1s, linear);
                 background: none;
                 color: $white;
-                float: right;
+                display: block;
                 font-size: 1em;
+                height: 40px;
+                left: 0;
                 line-height: 1.8;
                 padding: 10px;
+                width: 100%;
             }
 
             .dropdown-menu {
-                width: 199px;
-                margin-top: 4px;
                 margin-right: 3px;
+                margin-top: 4px;
+                width: 199px;
 
                 a {
                     overflow: hidden;
@@ -308,6 +312,7 @@
             .sidebar-header-dropdown__icon,
             .admin-navbar-dropdown__icon {
                 fill: $white;
+                float: right;
             }
         }
 
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 0428a20ae..0f72a7f26 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -311,7 +311,7 @@
 
     &.scrolling {
         @include translateY(0);
-        @include opacity(.8);
+        @include opacity(.9);
     }
 
     &.rhs {
@@ -322,6 +322,7 @@
         @include border-radius(3px);
         @include font-smoothing(initial);
         background: $primary-color;
+        border: 1px solid;
         color: $white;
         display: inline-block;
         font-size: 12px;
@@ -585,6 +586,7 @@
                 top: 2px;
             }
         }
+
         .search-item-snippet {
             blockquote {
                 margin-top: 0;
@@ -1091,7 +1093,7 @@
         }
 
         .pending-post-actions {
-            background: alpha-property($black, .7);
+            background: alpha-color($black, .7);
             color: $white;
             font-size: .9em;
             padding: 5px 7px;
@@ -1111,6 +1113,42 @@
                 font-size: .87em;
             }
         }
+
+        .post-reaction-list {
+            min-height: 30px;
+        }
+
+        .post-reaction {
+            @include user-select(none);
+            @include border-radius(3px);
+            border: 1px solid $primary-color;
+            cursor: pointer;
+            display: inline-block;
+            font-size: 11px;
+            height: 23px;
+            margin-bottom: 5px;
+            margin-right: 5px;
+            padding: 0 4px 0 3px;
+
+            .post-reaction__emoji {
+                height: 16px;
+                margin: 2px 3px 0 0;
+                vertical-align: top;
+                width: 16px;
+            }
+
+            .post-reaction__count {
+                line-height: 10px;
+                position: relative;
+                top: 3px;
+            }
+
+            &--current-user {
+                .post-reaction__count {
+                    font-weight: 600;
+                }
+            }
+        }
     }
 
     .post__link {
@@ -1299,39 +1337,3 @@
     margin-left: 50px !important;
     min-width: 320px;
 }
-
-.post-reaction-list {
-    min-height: 30px;
-}
-
-.post-reaction {
-    @include user-select(none);
-    @include border-radius(3px);
-    border: 1px solid $primary-color;
-    cursor: pointer;
-    display: inline-block;
-    font-size: 11px;
-    height: 23px;
-    padding: 0 4px 0 3px;
-    margin-right: 5px;
-    margin-bottom: 5px;
-
-    .post-reaction__emoji {
-        height: 16px;
-        margin: 2px 3px 0 0;
-        vertical-align: top;
-        width: 16px;
-    }
-
-    .post-reaction__count {
-        line-height: 10px;
-        position: relative;
-        top: 3px;
-    }
-
-    &--current-user {
-        .post-reaction__count {
-            font-weight: 600;
-        }
-    }
-}
diff --git a/webapp/sass/layout/_team-sidebar.scss b/webapp/sass/layout/_team-sidebar.scss
index 52f2dbd06..a600b8d44 100644
--- a/webapp/sass/layout/_team-sidebar.scss
+++ b/webapp/sass/layout/_team-sidebar.scss
@@ -21,6 +21,8 @@
                 width: 100%;
 
                 a {
+                    display: block;
+                    margin-left: 11px;
                     text-decoration: none;
                 }
 
diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss
index 68b47684e..891431f20 100644
--- a/webapp/sass/responsive/_desktop.scss
+++ b/webapp/sass/responsive/_desktop.scss
@@ -54,6 +54,10 @@
         }
     }
 
+    .help__format-text {
+        display: none;
+    }
+
     .inner-wrap {
         &.move--left,
         &.webrtc--show {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 5ade6046e..0914e2a18 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -608,6 +608,17 @@
                         display: block;
 
                         .settings-content {
+                            .section-title {
+                                padding-right: 15px;
+                            }
+
+                            .section-edit {
+                                position: relative;
+                                right: 0;
+                                text-align: left;
+                                top: 0;
+                            }
+
                             .appearance-section {
                                 .theme-elements {
                                     .element {
@@ -1080,16 +1091,14 @@
             }
 
             .post-create-footer {
-                padding: 0 45px 0 45px;
-
                 .control-label {
                     margin: .5em 0;
                     top: 0;
                 }
 
                 .post-error {
-                    top: 0;
                     left: 0;
+                    top: 0;
                 }
             }
         }
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index ac8b50961..a8fb2bbe7 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -33,7 +33,6 @@
             }
 
             .post-error {
-                left: 32px;
                 position: relative;
                 top: 0;
 
@@ -117,10 +116,6 @@
         width: 100%;
     }
 
-    .help__format-text {
-        display: none;
-    }
-
     .inner-wrap {
         &:not(.move--left) {
             margin-right: 0 !important;