PLT-6905 - Updating channel header design (#6789)

* PLT-6905 - Updating channel header design

* Updating border-radius

* Updating radius for wide icons

* Updating trigger for overlay

* Updating UI for channel header

* Updating channel header sizing

* Updating channel header css

* Updating sidebar css

* Updating status icons

* Adjusting border

* Updating comment

* Removing type from status icon

* Fixing UI issues for the channel header/sidebar

* make "Add a channel description" open the channel header modal

* Updating status and opacity

* Updating stauts icon positioning

* Updating description and heading size

* Updating UI changes

* Updating UI changes

* add a focused class to the parent div .search__form and then remove when hover away

* Fix active state for pinned posts icon

* Updating UI changes

* Update channel header text

webapp/sass/responsive/_tablet.scss

@@ -1,6 +1,30 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 960px) {
+    .inner-wrap {
+        &.move--left {
+            .channel-header {
+                .heading {
+                    max-width: calc(100vw - 600px);
+
+                    .multi-teams & {
+                        max-width: calc(100vw - 650px);
+                    }
+                }
+            }
+
+            .channel-header__info {
+                .channel-header__description {
+                    max-width: calc(100vw - 600px);
+
+                    .multi-teams & {
+                        max-width: calc(100vw - 650px);
+                    }
+                }
+            }
+        }
+    }
+
     .textarea-wrapper {
         .textbox-preview-link,
         .textbox-help-link {
@@ -8,15 +32,23 @@
         }
     }
 
-    .channel-header {
-        .heading {
-            max-width: 90px;
+    .channel-header__info {
+        .channel-header__description {
+            max-width: calc(100vw - 660px);
+
+            .multi-teams & {
+                max-width: calc(100vw - 710px);
+            }
         }
     }
 
-    .search__form {
-        .sidebar--right & {
-            width: 300px;
+    .channel-header {
+        .heading {
+            max-width: calc(100vw - 700px);
+
+            .multi-teams & {
+                max-width: calc(100vw - 750px);
+            }
         }
     }
 
@@ -137,7 +169,6 @@
             transform: translateX(0) !important;
 
             .search-bar__container {
-                padding-right: 8px;
                 z-index: 5;
             }
         }