PLT-3782 Do not move the "@" sign and flag icon to the left of search bar when opening the right hand sidebar (#4850)

* do not move the mention & flag button to the left of the search box when in search mode

* fixed the margin & padding issues of the search box

* fixed the member icon positioning issue and the expanded sidebar toggle issue

* fixed remaining bugs when sidebar is in expanded mode

* changed propTypes from func to bool

6 files changed, 40 insertions, 1 deletions

diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss
index 11bcdb92d..58216fefd 100644
--- a/webapp/sass/components/_search.scss
+++ b/webapp/sass/components/_search.scss
@@ -74,7 +74,10 @@
     }
 
     .sidebar--right & {
-        width: 100%;
+        width: 300px;
+        float: left;
+        margin-left: 17px;
+        margin-right: 9px;
     }
 
     .search-bar {
diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss
index c9deada26..d53737b78 100644
--- a/webapp/sass/components/_webrtc.scss
+++ b/webapp/sass/components/_webrtc.scss
@@ -347,4 +347,8 @@
     #videos.small {
         position: relative;
     }
+
+    .search__form {
+        width: calc(100% - 92px);
+    }
 }
diff --git a/webapp/sass/layout/_content.scss b/webapp/sass/layout/_content.scss
index 22e8a5369..02f063573 100644
--- a/webapp/sass/layout/_content.scss
+++ b/webapp/sass/layout/_content.scss
@@ -6,12 +6,28 @@
         .search-bar__container {
             display: none;
         }
+        .search-btns {
+            display: none;
+        }
+        .header-list__members {
+            margin-right: -18px;
+            float: right;
+            padding-right: 0px !important;
+        }
     }
 
     &.move--right {
         .search-bar__container {
             display: none;
         }
+        .search-btns {
+            display: none;
+        }
+        .header-list__members {
+            margin-right: -18px;
+            float: right;
+            padding-right: 0px !important;
+        }
     }
 }
 
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index db3bda627..710a8ad6a 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -25,6 +25,9 @@
 
         th {
             font-weight: normal !important;
+            &.header-list__members {
+                padding-right: 4px;
+            }
         }
 
         td {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 4a803b547..1dcaacc60 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -911,6 +911,9 @@
             height: 45px;
             padding: 7px 20px 0 49px;
             position: relative;
+            width: 100%;
+            margin-left: 0px;
+            margin-right: 0px;
 
             .icon--refresh {
                 @include opacity(.6);
@@ -927,6 +930,10 @@
                 padding: 0 10px 0 31px;
             }
         }
+
+        .channel-header__links {
+            display: none;
+        }
     }
 
     .sidebar--menu {
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 3d6abbd69..4de187846 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -20,6 +20,12 @@
         }
     }
 
+    .search__form {
+        .sidebar--right & {
+            width: 300px;
+        }
+    }
+
     .post-create__container {
         form {
             padding: .5em 0;