Ui ifxes (#5890)

* PLT-5975 - Back arrow in flag list cutting off

* PLT-6049 - Fixing pin icon color, and hover state

* PLT-5989 - Channel member and pin icon issue

* PLT-6067 - Pinned icon misaligned in firefox

* PLT-5885 - Adjusting icon spacing in modal

6 files changed, 20 insertions, 13 deletions

diff --git a/webapp/sass/base/_typography.scss b/webapp/sass/base/_typography.scss
index a9bc183c4..c2ec3a859 100644
--- a/webapp/sass/base/_typography.scss
+++ b/webapp/sass/base/_typography.scss
@@ -37,11 +37,11 @@ body {
 
 .fa {
     &.fa-margin--left {
-        margin-left: 2px;
+        margin-left: 3px;
     }
 
     &.fa-margin--right {
-        margin-right: 2px;
+        margin-right: 3px;
     }
 }
 
diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss
index 3cb405303..a36fb1c95 100644
--- a/webapp/sass/components/_webrtc.scss
+++ b/webapp/sass/components/_webrtc.scss
@@ -348,6 +348,7 @@
     }
 
     .search__form {
-        width: calc(100% - 92px);
+        margin-left: 5px;
+        width: calc(100% - 80px);
     }
 }
diff --git a/webapp/sass/layout/_content.scss b/webapp/sass/layout/_content.scss
index b6fe98eb4..b42818930 100644
--- a/webapp/sass/layout/_content.scss
+++ b/webapp/sass/layout/_content.scss
@@ -6,9 +6,11 @@
         .search-bar__container {
             display: none;
         }
+
         .search-btns {
             display: none;
         }
+
         .header-list__right {
             // the negative margin-right is used
             // to prevent the icons in the header from
@@ -17,12 +19,11 @@
             // the below z-index is used to ensure the icons
             // stays on the top and don't get hidden by the
             // search's input block
-            position: relative;
-            z-index: 6;
-
+            float: right;
             margin-right: -18px;
             padding-right: 0px !important;
-            float: right;
+            position: relative;
+            z-index: 6;
         }
     }
 
@@ -30,9 +31,11 @@
         .search-bar__container {
             display: none;
         }
+
         .search-btns {
             display: none;
         }
+
         .header-list__right {
             // the negative margin-right is used
             // to prevent the icons in the header from
@@ -41,12 +44,11 @@
             // the below z-index is used to ensure the icons
             // stays on the top and don't get hidden by the
             // search's input block
-            position: relative;
-            z-index: 6;
-
+            float: right;
             margin-right: -18px;
             padding-right: 0px !important;
-            float: right
+            position: relative;
+            z-index: 6;
         }
     }
 }
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index f8211d433..4368fc397 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -44,6 +44,7 @@
             font-weight: normal !important;
 
             &.header-list__right {
+                white-space: nowrap;
                 padding-right: 4px;
             }
         }
diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss
index 8d5a1d044..8d801a0c2 100644
--- a/webapp/sass/layout/_sidebar-right.scss
+++ b/webapp/sass/layout/_sidebar-right.scss
@@ -14,6 +14,10 @@
         z-index: 5;
     }
 
+    &.sidebar--right--expanded {
+        z-index: 10;
+    }
+
     .sidebar--right__bg {
         @include single-transition(background-color, .5s, ease);
         background-color: alpha-color($black, 0);
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 54fff87e8..e97eb3b59 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -220,9 +220,8 @@
         .sidebar--right__title {
             display: inline-block;
             max-width: 300px;
-            white-space: nowrap;
-            overflow: hidden;
             text-overflow: ellipsis;
+            white-space: nowrap;
         }
     }