From 4ba736f018efd05959b199a0cc81a71a293afdec Mon Sep 17 00:00:00 2001
From: Matthew Birtch <mattbirtch@gmail.com>
Date: Fri, 26 Apr 2024 09:21:28 -0400
Subject: [PATCH] MM-56324 Channel Header UI Update (#26383)

---
 .../src/components/app_bar/app_bar.scss       |    2 +-
 .../channel_header.test.tsx.snap              | 4511 +++++++++--------
 .../channel_header/channel_header.tsx         |   96 +-
 .../channel_header/channel_header_title.tsx   |   97 +-
 .../channel_header_title_favorite.tsx         |    2 +-
 .../src/components/drafts/drafts.scss         |    2 +-
 .../search_results/search_results.tsx         |    4 +-
 .../sidebar/sidebar_header/sidebar_header.tsx |    2 +-
 .../global_threads/global_threads.scss        |    2 +-
 .../thread_list/thread_list.scss              |    4 +-
 .../src/components/widgets/header/header.scss |   18 +-
 webapp/channels/src/i18n/en.json              |    2 +-
 .../src/sass/components/_buttons.scss         |    8 +-
 .../components/_channel-header__icon.scss     |    8 +-
 .../src/sass/components/_popover.scss         |   29 +-
 webapp/channels/src/sass/layout/_headers.scss |  282 +-
 .../src/sass/layout/_sidebar-right.scss       |   13 +-
 17 files changed, 2600 insertions(+), 2482 deletions(-)

diff --git a/webapp/channels/src/components/app_bar/app_bar.scss b/webapp/channels/src/components/app_bar/app_bar.scss
index 35d4d5149a..2bdc0ca303 100644
--- a/webapp/channels/src/components/app_bar/app_bar.scss
+++ b/webapp/channels/src/components/app_bar/app_bar.scss
@@ -24,7 +24,7 @@ $app-bar-width: 48px;
         width: $app-bar-width;
         flex: 1;
         flex-flow: column;
-        padding-top: 19px;
+        padding-top: 15px;
         background-color: rgba(var(--center-channel-color-rgb), 0.04);
         -ms-overflow-style: none;
         overflow-x: hidden;
diff --git a/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap b/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap
index 35895ea144..37511f78c6 100644
--- a/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap
+++ b/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap
@@ -23,201 +23,200 @@ exports[`components/ChannelHeader should match snapshot with last active display
         <div
           className="channel-header__title dropdown"
         >
-          <div>
-            <Memo(ChannelHeaderTitle)
-              dmUser={
-                Object {
-                  "auth_service": "",
-                  "bot_description": "",
-                  "create_at": 0,
-                  "delete_at": 0,
-                  "email": "",
-                  "first_name": "",
-                  "id": "user_id",
-                  "is_bot": false,
-                  "last_activity_at": 0,
-                  "last_name": "",
-                  "last_password_update": 0,
-                  "last_picture_update": 0,
-                  "locale": "",
-                  "mfa_active": false,
-                  "nickname": "",
-                  "notify_props": Object {
-                    "calls_desktop_sound": "true",
-                    "channel": "false",
-                    "comments": "never",
-                    "desktop": "default",
-                    "desktop_sound": "false",
-                    "email": "false",
-                    "first_name": "false",
-                    "highlight_keys": "",
-                    "mark_unread": "mention",
-                    "mention_keys": "",
-                    "push": "none",
-                    "push_status": "offline",
-                  },
-                  "password": "",
-                  "position": "",
-                  "props": Object {
-                    "show_last_active": "true",
-                  },
-                  "roles": "",
-                  "terms_of_service_create_at": 0,
-                  "terms_of_service_id": "",
-                  "update_at": 0,
-                  "username": "some-user",
-                }
+          <Memo(ChannelHeaderTitle)
+            dmUser={
+              Object {
+                "auth_service": "",
+                "bot_description": "",
+                "create_at": 0,
+                "delete_at": 0,
+                "email": "",
+                "first_name": "",
+                "id": "user_id",
+                "is_bot": false,
+                "last_activity_at": 0,
+                "last_name": "",
+                "last_password_update": 0,
+                "last_picture_update": 0,
+                "locale": "",
+                "mfa_active": false,
+                "nickname": "",
+                "notify_props": Object {
+                  "calls_desktop_sound": "true",
+                  "channel": "false",
+                  "comments": "never",
+                  "desktop": "default",
+                  "desktop_sound": "false",
+                  "email": "false",
+                  "first_name": "false",
+                  "highlight_keys": "",
+                  "mark_unread": "mention",
+                  "mention_keys": "",
+                  "push": "none",
+                  "push_status": "offline",
+                },
+                "password": "",
+                "position": "",
+                "props": Object {
+                  "show_last_active": "true",
+                },
+                "roles": "",
+                "terms_of_service_create_at": 0,
+                "terms_of_service_id": "",
+                "update_at": 0,
+                "username": "some-user",
               }
+            }
+          />
+          <div
+            className="channel-header__icons"
+          >
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="channelHeaderPinButton"
+              iconComponent={
+                <i
+                  aria-hidden="true"
+                  className="icon icon-pin-outline channel-header__pin"
+                />
+              }
+              onClick={[Function]}
+              tooltipKey="pinnedPosts"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
+              buttonId="channelHeaderFilesButton"
+              iconComponent={
+                <i
+                  className="icon icon-file-text-outline"
+                />
+              }
+              onClick={[Function]}
+              tooltipKey="channelFiles"
             />
           </div>
-        </div>
-        <div
-          className="channel-header__description"
-          dir="auto"
-          id="channelHeaderDescription"
-        >
-          <Memo(StatusIcon)
-            status="offline"
-          />
-          <span
-            className="header-status__text"
+          <div
+            className="channel-header__description"
+            dir="auto"
+            id="channelHeaderDescription"
           >
             <span
-              className="last-active__text"
+              className="header-status__text"
             >
-              <MemoizedFormattedMessage
-                defaultMessage="Active {timestamp}"
-                id="channel_header.lastActive"
-                values={
+              <span
+                className="last-active__text"
+              >
+                <MemoizedFormattedMessage
+                  defaultMessage="Active {timestamp}"
+                  id="channel_header.lastActive"
+                  values={
+                    Object {
+                      "timestamp": <Memo(Connect(injectIntl(Timestamp)))
+                        style="short"
+                        units={
+                          Array [
+                            "now",
+                            "minute",
+                            "hour",
+                          ]
+                        }
+                        useTime={false}
+                        value={1632146562846}
+                      />,
+                    }
+                  }
+                />
+              </span>
+            </span>
+            <div
+              className="header-popover-text-measurer"
+            >
+              <Connect(Markdown)
+                imageProps={
                   Object {
-                    "timestamp": <Memo(Connect(injectIntl(Timestamp)))
-                      style="short"
-                      units={
-                        Array [
-                          "now",
-                          "minute",
-                          "hour",
-                        ]
+                    "hideUtilities": true,
+                  }
+                }
+                message="not the bot description"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
+                }
+              />
+            </div>
+            <span
+              className="header-description__text"
+              onClick={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+            >
+              <Overlay
+                animation={[Function]}
+                onHide={[Function]}
+                placement="bottom"
+                rootClose={true}
+                show={false}
+                target={null}
+              >
+                <Memo(Popover)
+                  className="channel-header__popover"
+                  id="header-popover"
+                  placement="bottom"
+                  popoverSize="lg"
+                  popoverStyle="info"
+                  style={
+                    Object {
+                      "maxWidth": 16,
+                      "transform": "translate(0px, 0px)",
+                    }
+                  }
+                >
+                  <span
+                    onClick={[Function]}
+                  >
+                    <Connect(Markdown)
+                      imageProps={
+                        Object {
+                          "hideUtilities": true,
+                        }
                       }
-                      useTime={false}
-                      value={1632146562846}
-                    />,
+                      message="not the bot description"
+                      options={
+                        Object {
+                          "atMentions": true,
+                          "channelNamesMap": undefined,
+                          "mentionHighlight": false,
+                          "singleline": false,
+                        }
+                      }
+                    />
+                  </span>
+                </Memo(Popover)>
+              </Overlay>
+              <Connect(Markdown)
+                imageProps={
+                  Object {
+                    "hideUtilities": true,
+                  }
+                }
+                message="not the bot description"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
                   }
                 }
               />
             </span>
-          </span>
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderPinButton"
-            iconComponent={
-              <i
-                aria-hidden="true"
-                className="icon icon-pin-outline channel-header__pin"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="pinnedPosts"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderFilesButton"
-            iconComponent={
-              <i
-                className="icon icon-file-text-outline"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="channelFiles"
-          />
-          <div
-            className="header-popover-text-measurer"
-          >
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
-              }
-              message="not the bot description"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
-                }
-              }
-            />
           </div>
-          <span
-            className="header-description__text"
-            onClick={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-          >
-            <Overlay
-              animation={[Function]}
-              onHide={[Function]}
-              placement="bottom"
-              rootClose={true}
-              show={false}
-              target={null}
-            >
-              <Memo(Popover)
-                className="channel-header__popover"
-                id="header-popover"
-                placement="bottom"
-                popoverSize="lg"
-                popoverStyle="info"
-                style={
-                  Object {
-                    "maxWidth": 0,
-                    "transform": "translate(0px, 0px)",
-                  }
-                }
-              >
-                <span
-                  onClick={[Function]}
-                >
-                  <Connect(Markdown)
-                    imageProps={
-                      Object {
-                        "hideUtilities": true,
-                      }
-                    }
-                    message="not the bot description"
-                    options={
-                      Object {
-                        "atMentions": true,
-                        "channelNamesMap": undefined,
-                        "mentionHighlight": false,
-                        "singleline": false,
-                      }
-                    }
-                  />
-                </span>
-              </Memo(Popover)>
-            </Overlay>
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
-              }
-              message="not the bot description"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
-                }
-              }
-            />
-          </span>
         </div>
       </div>
     </div>
@@ -317,181 +316,175 @@ exports[`components/ChannelHeader should match snapshot with no last active disp
         <div
           className="channel-header__title dropdown"
         >
-          <div>
-            <Memo(ChannelHeaderTitle)
-              dmUser={
-                Object {
-                  "auth_service": "",
-                  "bot_description": "",
-                  "create_at": 0,
-                  "delete_at": 0,
-                  "email": "",
-                  "first_name": "",
-                  "id": "user_id",
-                  "is_bot": false,
-                  "last_activity_at": 0,
-                  "last_name": "",
-                  "last_password_update": 0,
-                  "last_picture_update": 0,
-                  "locale": "",
-                  "mfa_active": false,
-                  "nickname": "",
-                  "notify_props": Object {
-                    "calls_desktop_sound": "true",
-                    "channel": "false",
-                    "comments": "never",
-                    "desktop": "default",
-                    "desktop_sound": "false",
-                    "email": "false",
-                    "first_name": "false",
-                    "highlight_keys": "",
-                    "mark_unread": "mention",
-                    "mention_keys": "",
-                    "push": "none",
-                    "push_status": "offline",
-                  },
-                  "password": "",
-                  "position": "",
-                  "props": Object {
-                    "show_last_active": "false",
-                  },
-                  "roles": "",
-                  "terms_of_service_create_at": 0,
-                  "terms_of_service_id": "",
-                  "update_at": 0,
-                  "username": "some-user",
-                }
+          <Memo(ChannelHeaderTitle)
+            dmUser={
+              Object {
+                "auth_service": "",
+                "bot_description": "",
+                "create_at": 0,
+                "delete_at": 0,
+                "email": "",
+                "first_name": "",
+                "id": "user_id",
+                "is_bot": false,
+                "last_activity_at": 0,
+                "last_name": "",
+                "last_password_update": 0,
+                "last_picture_update": 0,
+                "locale": "",
+                "mfa_active": false,
+                "nickname": "",
+                "notify_props": Object {
+                  "calls_desktop_sound": "true",
+                  "channel": "false",
+                  "comments": "never",
+                  "desktop": "default",
+                  "desktop_sound": "false",
+                  "email": "false",
+                  "first_name": "false",
+                  "highlight_keys": "",
+                  "mark_unread": "mention",
+                  "mention_keys": "",
+                  "push": "none",
+                  "push_status": "offline",
+                },
+                "password": "",
+                "position": "",
+                "props": Object {
+                  "show_last_active": "false",
+                },
+                "roles": "",
+                "terms_of_service_create_at": 0,
+                "terms_of_service_id": "",
+                "update_at": 0,
+                "username": "some-user",
               }
-            />
-          </div>
-        </div>
-        <div
-          className="channel-header__description"
-          dir="auto"
-          id="channelHeaderDescription"
-        >
-          <Memo(StatusIcon)
-            status="offline"
-          />
-          <span
-            className="header-status__text"
-          >
-            <MemoizedFormattedMessage
-              defaultMessage="Offline"
-              id="status_dropdown.set_offline"
-            />
-          </span>
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderPinButton"
-            iconComponent={
-              <i
-                aria-hidden="true"
-                className="icon icon-pin-outline channel-header__pin"
-              />
             }
-            onClick={[Function]}
-            tooltipKey="pinnedPosts"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderFilesButton"
-            iconComponent={
-              <i
-                className="icon icon-file-text-outline"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="channelFiles"
           />
           <div
-            className="header-popover-text-measurer"
+            className="channel-header__icons"
           >
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="channelHeaderPinButton"
+              iconComponent={
+                <i
+                  aria-hidden="true"
+                  className="icon icon-pin-outline channel-header__pin"
+                />
               }
-              message="not the bot description"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
-                }
+              onClick={[Function]}
+              tooltipKey="pinnedPosts"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
+              buttonId="channelHeaderFilesButton"
+              iconComponent={
+                <i
+                  className="icon icon-file-text-outline"
+                />
               }
+              onClick={[Function]}
+              tooltipKey="channelFiles"
             />
           </div>
-          <span
-            className="header-description__text"
-            onClick={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
+          <div
+            className="channel-header__description"
+            dir="auto"
+            id="channelHeaderDescription"
           >
-            <Overlay
-              animation={[Function]}
-              onHide={[Function]}
-              placement="bottom"
-              rootClose={true}
-              show={false}
-              target={null}
+            <span
+              className="header-status__text"
+            />
+            <div
+              className="header-popover-text-measurer"
             >
-              <Memo(Popover)
-                className="channel-header__popover"
-                id="header-popover"
-                placement="bottom"
-                popoverSize="lg"
-                popoverStyle="info"
-                style={
+              <Connect(Markdown)
+                imageProps={
                   Object {
-                    "maxWidth": 0,
-                    "transform": "translate(0px, 0px)",
+                    "hideUtilities": true,
                   }
                 }
+                message="not the bot description"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
+                }
+              />
+            </div>
+            <span
+              className="header-description__text"
+              onClick={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+            >
+              <Overlay
+                animation={[Function]}
+                onHide={[Function]}
+                placement="bottom"
+                rootClose={true}
+                show={false}
+                target={null}
               >
-                <span
-                  onClick={[Function]}
+                <Memo(Popover)
+                  className="channel-header__popover"
+                  id="header-popover"
+                  placement="bottom"
+                  popoverSize="lg"
+                  popoverStyle="info"
+                  style={
+                    Object {
+                      "maxWidth": 16,
+                      "transform": "translate(0px, 0px)",
+                    }
+                  }
                 >
-                  <Connect(Markdown)
-                    imageProps={
-                      Object {
-                        "hideUtilities": true,
+                  <span
+                    onClick={[Function]}
+                  >
+                    <Connect(Markdown)
+                      imageProps={
+                        Object {
+                          "hideUtilities": true,
+                        }
                       }
-                    }
-                    message="not the bot description"
-                    options={
-                      Object {
-                        "atMentions": true,
-                        "channelNamesMap": undefined,
-                        "mentionHighlight": false,
-                        "singleline": false,
+                      message="not the bot description"
+                      options={
+                        Object {
+                          "atMentions": true,
+                          "channelNamesMap": undefined,
+                          "mentionHighlight": false,
+                          "singleline": false,
+                        }
                       }
-                    }
-                  />
-                </span>
-              </Memo(Popover)>
-            </Overlay>
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
+                    />
+                  </span>
+                </Memo(Popover)>
+              </Overlay>
+              <Connect(Markdown)
+                imageProps={
+                  Object {
+                    "hideUtilities": true,
+                  }
                 }
-              }
-              message="not the bot description"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
+                message="not the bot description"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
                 }
-              }
-            />
-          </span>
+              />
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -591,147 +584,149 @@ exports[`components/ChannelHeader should render active channel files 1`] = `
         <div
           className="channel-header__title dropdown"
         >
-          <div>
-            <Memo(ChannelHeaderTitle) />
-          </div>
-        </div>
-        <div
-          className="channel-header__description"
-          dir="auto"
-          id="channelHeaderDescription"
-        >
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
-            buttonId="member_rhs"
-            iconComponent={
-              <React.Fragment>
+          <Memo(ChannelHeaderTitle) />
+          <div
+            className="channel-header__icons"
+          >
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="member_rhs"
+              iconComponent={
+                <React.Fragment>
+                  <i
+                    aria-hidden="true"
+                    className="icon icon-account-outline channel-header__members"
+                  />
+                  <span
+                    className="icon__text"
+                    id="channelMemberCountText"
+                  >
+                    -
+                  </span>
+                </React.Fragment>
+              }
+              onClick={[Function]}
+              tooltipKey="channelMembers"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="channelHeaderPinButton"
+              iconComponent={
                 <i
                   aria-hidden="true"
-                  className="icon icon-account-outline channel-header__members"
+                  className="icon icon-pin-outline channel-header__pin"
                 />
-                <span
-                  className="icon__text"
-                  id="channelMemberCountText"
-                >
-                  -
-                </span>
-              </React.Fragment>
-            }
-            onClick={[Function]}
-            tooltipKey="channelMembers"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderPinButton"
-            iconComponent={
-              <i
-                aria-hidden="true"
-                className="icon icon-pin-outline channel-header__pin"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="pinnedPosts"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left channel-header__icon--active"
-            buttonId="channelHeaderFilesButton"
-            iconComponent={
-              <i
-                className="icon icon-file-text-outline"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="channelFiles"
-          />
-          <div
-            className="header-popover-text-measurer"
-          >
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
               }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
-                }
+              onClick={[Function]}
+              tooltipKey="pinnedPosts"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs  channel-header__icon--active"
+              buttonId="channelHeaderFilesButton"
+              iconComponent={
+                <i
+                  className="icon icon-file-text-outline"
+                />
               }
+              onClick={[Function]}
+              tooltipKey="channelFiles"
             />
           </div>
-          <span
-            className="header-description__text"
-            onClick={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
+          <div
+            className="channel-header__description"
+            dir="auto"
+            id="channelHeaderDescription"
           >
-            <Overlay
-              animation={[Function]}
-              onHide={[Function]}
-              placement="bottom"
-              rootClose={true}
-              show={false}
-              target={null}
+            <div
+              className="header-popover-text-measurer"
             >
-              <Memo(Popover)
-                className="channel-header__popover"
-                id="header-popover"
-                placement="bottom"
-                popoverSize="lg"
-                popoverStyle="info"
-                style={
+              <Connect(Markdown)
+                imageProps={
                   Object {
-                    "maxWidth": 0,
-                    "transform": "translate(0px, 0px)",
+                    "hideUtilities": true,
                   }
                 }
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
+                }
+              />
+            </div>
+            <span
+              className="header-description__text"
+              onClick={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+            >
+              <Overlay
+                animation={[Function]}
+                onHide={[Function]}
+                placement="bottom"
+                rootClose={true}
+                show={false}
+                target={null}
               >
-                <span
-                  onClick={[Function]}
+                <Memo(Popover)
+                  className="channel-header__popover"
+                  id="header-popover"
+                  placement="bottom"
+                  popoverSize="lg"
+                  popoverStyle="info"
+                  style={
+                    Object {
+                      "maxWidth": 16,
+                      "transform": "translate(0px, 0px)",
+                    }
+                  }
                 >
-                  <Connect(Markdown)
-                    imageProps={
-                      Object {
-                        "hideUtilities": true,
+                  <span
+                    onClick={[Function]}
+                  >
+                    <Connect(Markdown)
+                      imageProps={
+                        Object {
+                          "hideUtilities": true,
+                        }
                       }
-                    }
-                    message="header"
-                    options={
-                      Object {
-                        "atMentions": true,
-                        "channelNamesMap": undefined,
-                        "mentionHighlight": false,
-                        "singleline": false,
+                      message="header"
+                      options={
+                        Object {
+                          "atMentions": true,
+                          "channelNamesMap": undefined,
+                          "mentionHighlight": false,
+                          "singleline": false,
+                        }
                       }
-                    }
-                  />
-                </span>
-              </Memo(Popover)>
-            </Overlay>
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
+                    />
+                  </span>
+                </Memo(Popover)>
+              </Overlay>
+              <Connect(Markdown)
+                imageProps={
+                  Object {
+                    "hideUtilities": true,
+                  }
                 }
-              }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
                 }
-              }
-            />
-          </span>
+              />
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -829,147 +824,149 @@ exports[`components/ChannelHeader should render active flagged posts 1`] = `
         <div
           className="channel-header__title dropdown"
         >
-          <div>
-            <Memo(ChannelHeaderTitle) />
-          </div>
-        </div>
-        <div
-          className="channel-header__description"
-          dir="auto"
-          id="channelHeaderDescription"
-        >
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
-            buttonId="member_rhs"
-            iconComponent={
-              <React.Fragment>
+          <Memo(ChannelHeaderTitle) />
+          <div
+            className="channel-header__icons"
+          >
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="member_rhs"
+              iconComponent={
+                <React.Fragment>
+                  <i
+                    aria-hidden="true"
+                    className="icon icon-account-outline channel-header__members"
+                  />
+                  <span
+                    className="icon__text"
+                    id="channelMemberCountText"
+                  >
+                    -
+                  </span>
+                </React.Fragment>
+              }
+              onClick={[Function]}
+              tooltipKey="channelMembers"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="channelHeaderPinButton"
+              iconComponent={
                 <i
                   aria-hidden="true"
-                  className="icon icon-account-outline channel-header__members"
+                  className="icon icon-pin-outline channel-header__pin"
                 />
-                <span
-                  className="icon__text"
-                  id="channelMemberCountText"
-                >
-                  -
-                </span>
-              </React.Fragment>
-            }
-            onClick={[Function]}
-            tooltipKey="channelMembers"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderPinButton"
-            iconComponent={
-              <i
-                aria-hidden="true"
-                className="icon icon-pin-outline channel-header__pin"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="pinnedPosts"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderFilesButton"
-            iconComponent={
-              <i
-                className="icon icon-file-text-outline"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="channelFiles"
-          />
-          <div
-            className="header-popover-text-measurer"
-          >
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
               }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
-                }
+              onClick={[Function]}
+              tooltipKey="pinnedPosts"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
+              buttonId="channelHeaderFilesButton"
+              iconComponent={
+                <i
+                  className="icon icon-file-text-outline"
+                />
               }
+              onClick={[Function]}
+              tooltipKey="channelFiles"
             />
           </div>
-          <span
-            className="header-description__text"
-            onClick={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
+          <div
+            className="channel-header__description"
+            dir="auto"
+            id="channelHeaderDescription"
           >
-            <Overlay
-              animation={[Function]}
-              onHide={[Function]}
-              placement="bottom"
-              rootClose={true}
-              show={false}
-              target={null}
+            <div
+              className="header-popover-text-measurer"
             >
-              <Memo(Popover)
-                className="channel-header__popover"
-                id="header-popover"
-                placement="bottom"
-                popoverSize="lg"
-                popoverStyle="info"
-                style={
+              <Connect(Markdown)
+                imageProps={
                   Object {
-                    "maxWidth": 0,
-                    "transform": "translate(0px, 0px)",
+                    "hideUtilities": true,
                   }
                 }
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
+                }
+              />
+            </div>
+            <span
+              className="header-description__text"
+              onClick={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+            >
+              <Overlay
+                animation={[Function]}
+                onHide={[Function]}
+                placement="bottom"
+                rootClose={true}
+                show={false}
+                target={null}
               >
-                <span
-                  onClick={[Function]}
+                <Memo(Popover)
+                  className="channel-header__popover"
+                  id="header-popover"
+                  placement="bottom"
+                  popoverSize="lg"
+                  popoverStyle="info"
+                  style={
+                    Object {
+                      "maxWidth": 16,
+                      "transform": "translate(0px, 0px)",
+                    }
+                  }
                 >
-                  <Connect(Markdown)
-                    imageProps={
-                      Object {
-                        "hideUtilities": true,
+                  <span
+                    onClick={[Function]}
+                  >
+                    <Connect(Markdown)
+                      imageProps={
+                        Object {
+                          "hideUtilities": true,
+                        }
                       }
-                    }
-                    message="header"
-                    options={
-                      Object {
-                        "atMentions": true,
-                        "channelNamesMap": undefined,
-                        "mentionHighlight": false,
-                        "singleline": false,
+                      message="header"
+                      options={
+                        Object {
+                          "atMentions": true,
+                          "channelNamesMap": undefined,
+                          "mentionHighlight": false,
+                          "singleline": false,
+                        }
                       }
-                    }
-                  />
-                </span>
-              </Memo(Popover)>
-            </Overlay>
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
+                    />
+                  </span>
+                </Memo(Popover)>
+              </Overlay>
+              <Connect(Markdown)
+                imageProps={
+                  Object {
+                    "hideUtilities": true,
+                  }
                 }
-              }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
                 }
-              }
-            />
-          </span>
+              />
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -1067,147 +1064,149 @@ exports[`components/ChannelHeader should render active mentions posts 1`] = `
         <div
           className="channel-header__title dropdown"
         >
-          <div>
-            <Memo(ChannelHeaderTitle) />
-          </div>
-        </div>
-        <div
-          className="channel-header__description"
-          dir="auto"
-          id="channelHeaderDescription"
-        >
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
-            buttonId="member_rhs"
-            iconComponent={
-              <React.Fragment>
+          <Memo(ChannelHeaderTitle) />
+          <div
+            className="channel-header__icons"
+          >
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="member_rhs"
+              iconComponent={
+                <React.Fragment>
+                  <i
+                    aria-hidden="true"
+                    className="icon icon-account-outline channel-header__members"
+                  />
+                  <span
+                    className="icon__text"
+                    id="channelMemberCountText"
+                  >
+                    -
+                  </span>
+                </React.Fragment>
+              }
+              onClick={[Function]}
+              tooltipKey="channelMembers"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="channelHeaderPinButton"
+              iconComponent={
                 <i
                   aria-hidden="true"
-                  className="icon icon-account-outline channel-header__members"
+                  className="icon icon-pin-outline channel-header__pin"
                 />
-                <span
-                  className="icon__text"
-                  id="channelMemberCountText"
-                >
-                  -
-                </span>
-              </React.Fragment>
-            }
-            onClick={[Function]}
-            tooltipKey="channelMembers"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderPinButton"
-            iconComponent={
-              <i
-                aria-hidden="true"
-                className="icon icon-pin-outline channel-header__pin"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="pinnedPosts"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderFilesButton"
-            iconComponent={
-              <i
-                className="icon icon-file-text-outline"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="channelFiles"
-          />
-          <div
-            className="header-popover-text-measurer"
-          >
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
               }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
-                }
+              onClick={[Function]}
+              tooltipKey="pinnedPosts"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
+              buttonId="channelHeaderFilesButton"
+              iconComponent={
+                <i
+                  className="icon icon-file-text-outline"
+                />
               }
+              onClick={[Function]}
+              tooltipKey="channelFiles"
             />
           </div>
-          <span
-            className="header-description__text"
-            onClick={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
+          <div
+            className="channel-header__description"
+            dir="auto"
+            id="channelHeaderDescription"
           >
-            <Overlay
-              animation={[Function]}
-              onHide={[Function]}
-              placement="bottom"
-              rootClose={true}
-              show={false}
-              target={null}
+            <div
+              className="header-popover-text-measurer"
             >
-              <Memo(Popover)
-                className="channel-header__popover"
-                id="header-popover"
-                placement="bottom"
-                popoverSize="lg"
-                popoverStyle="info"
-                style={
+              <Connect(Markdown)
+                imageProps={
                   Object {
-                    "maxWidth": 0,
-                    "transform": "translate(0px, 0px)",
+                    "hideUtilities": true,
                   }
                 }
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
+                }
+              />
+            </div>
+            <span
+              className="header-description__text"
+              onClick={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+            >
+              <Overlay
+                animation={[Function]}
+                onHide={[Function]}
+                placement="bottom"
+                rootClose={true}
+                show={false}
+                target={null}
               >
-                <span
-                  onClick={[Function]}
+                <Memo(Popover)
+                  className="channel-header__popover"
+                  id="header-popover"
+                  placement="bottom"
+                  popoverSize="lg"
+                  popoverStyle="info"
+                  style={
+                    Object {
+                      "maxWidth": 16,
+                      "transform": "translate(0px, 0px)",
+                    }
+                  }
                 >
-                  <Connect(Markdown)
-                    imageProps={
-                      Object {
-                        "hideUtilities": true,
+                  <span
+                    onClick={[Function]}
+                  >
+                    <Connect(Markdown)
+                      imageProps={
+                        Object {
+                          "hideUtilities": true,
+                        }
                       }
-                    }
-                    message="header"
-                    options={
-                      Object {
-                        "atMentions": true,
-                        "channelNamesMap": undefined,
-                        "mentionHighlight": false,
-                        "singleline": false,
+                      message="header"
+                      options={
+                        Object {
+                          "atMentions": true,
+                          "channelNamesMap": undefined,
+                          "mentionHighlight": false,
+                          "singleline": false,
+                        }
                       }
-                    }
-                  />
-                </span>
-              </Memo(Popover)>
-            </Overlay>
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
+                    />
+                  </span>
+                </Memo(Popover)>
+              </Overlay>
+              <Connect(Markdown)
+                imageProps={
+                  Object {
+                    "hideUtilities": true,
+                  }
                 }
-              }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
                 }
-              }
-            />
-          </span>
+              />
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -1305,147 +1304,149 @@ exports[`components/ChannelHeader should render active pinned posts 1`] = `
         <div
           className="channel-header__title dropdown"
         >
-          <div>
-            <Memo(ChannelHeaderTitle) />
-          </div>
-        </div>
-        <div
-          className="channel-header__description"
-          dir="auto"
-          id="channelHeaderDescription"
-        >
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
-            buttonId="member_rhs"
-            iconComponent={
-              <React.Fragment>
+          <Memo(ChannelHeaderTitle) />
+          <div
+            className="channel-header__icons"
+          >
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="member_rhs"
+              iconComponent={
+                <React.Fragment>
+                  <i
+                    aria-hidden="true"
+                    className="icon icon-account-outline channel-header__members"
+                  />
+                  <span
+                    className="icon__text"
+                    id="channelMemberCountText"
+                  >
+                    -
+                  </span>
+                </React.Fragment>
+              }
+              onClick={[Function]}
+              tooltipKey="channelMembers"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs channel-header__icon--active"
+              buttonId="channelHeaderPinButton"
+              iconComponent={
                 <i
                   aria-hidden="true"
-                  className="icon icon-account-outline channel-header__members"
+                  className="icon icon-pin-outline channel-header__pin"
                 />
-                <span
-                  className="icon__text"
-                  id="channelMemberCountText"
-                >
-                  -
-                </span>
-              </React.Fragment>
-            }
-            onClick={[Function]}
-            tooltipKey="channelMembers"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left channel-header__icon--active"
-            buttonId="channelHeaderPinButton"
-            iconComponent={
-              <i
-                aria-hidden="true"
-                className="icon icon-pin-outline channel-header__pin"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="pinnedPosts"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderFilesButton"
-            iconComponent={
-              <i
-                className="icon icon-file-text-outline"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="channelFiles"
-          />
-          <div
-            className="header-popover-text-measurer"
-          >
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
               }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
-                }
+              onClick={[Function]}
+              tooltipKey="pinnedPosts"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
+              buttonId="channelHeaderFilesButton"
+              iconComponent={
+                <i
+                  className="icon icon-file-text-outline"
+                />
               }
+              onClick={[Function]}
+              tooltipKey="channelFiles"
             />
           </div>
-          <span
-            className="header-description__text"
-            onClick={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
+          <div
+            className="channel-header__description"
+            dir="auto"
+            id="channelHeaderDescription"
           >
-            <Overlay
-              animation={[Function]}
-              onHide={[Function]}
-              placement="bottom"
-              rootClose={true}
-              show={false}
-              target={null}
+            <div
+              className="header-popover-text-measurer"
             >
-              <Memo(Popover)
-                className="channel-header__popover"
-                id="header-popover"
-                placement="bottom"
-                popoverSize="lg"
-                popoverStyle="info"
-                style={
+              <Connect(Markdown)
+                imageProps={
                   Object {
-                    "maxWidth": 0,
-                    "transform": "translate(0px, 0px)",
+                    "hideUtilities": true,
                   }
                 }
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
+                }
+              />
+            </div>
+            <span
+              className="header-description__text"
+              onClick={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+            >
+              <Overlay
+                animation={[Function]}
+                onHide={[Function]}
+                placement="bottom"
+                rootClose={true}
+                show={false}
+                target={null}
               >
-                <span
-                  onClick={[Function]}
+                <Memo(Popover)
+                  className="channel-header__popover"
+                  id="header-popover"
+                  placement="bottom"
+                  popoverSize="lg"
+                  popoverStyle="info"
+                  style={
+                    Object {
+                      "maxWidth": 16,
+                      "transform": "translate(0px, 0px)",
+                    }
+                  }
                 >
-                  <Connect(Markdown)
-                    imageProps={
-                      Object {
-                        "hideUtilities": true,
+                  <span
+                    onClick={[Function]}
+                  >
+                    <Connect(Markdown)
+                      imageProps={
+                        Object {
+                          "hideUtilities": true,
+                        }
                       }
-                    }
-                    message="header"
-                    options={
-                      Object {
-                        "atMentions": true,
-                        "channelNamesMap": undefined,
-                        "mentionHighlight": false,
-                        "singleline": false,
+                      message="header"
+                      options={
+                        Object {
+                          "atMentions": true,
+                          "channelNamesMap": undefined,
+                          "mentionHighlight": false,
+                          "singleline": false,
+                        }
                       }
-                    }
-                  />
-                </span>
-              </Memo(Popover)>
-            </Overlay>
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
+                    />
+                  </span>
+                </Memo(Popover)>
+              </Overlay>
+              <Connect(Markdown)
+                imageProps={
+                  Object {
+                    "hideUtilities": true,
+                  }
                 }
-              }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
                 }
-              }
-            />
-          </span>
+              />
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -1543,147 +1544,149 @@ exports[`components/ChannelHeader should render archived view 1`] = `
         <div
           className="channel-header__title dropdown"
         >
-          <div>
-            <Memo(ChannelHeaderTitle) />
-          </div>
-        </div>
-        <div
-          className="channel-header__description"
-          dir="auto"
-          id="channelHeaderDescription"
-        >
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
-            buttonId="member_rhs"
-            iconComponent={
-              <React.Fragment>
+          <Memo(ChannelHeaderTitle) />
+          <div
+            className="channel-header__icons"
+          >
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="member_rhs"
+              iconComponent={
+                <React.Fragment>
+                  <i
+                    aria-hidden="true"
+                    className="icon icon-account-outline channel-header__members"
+                  />
+                  <span
+                    className="icon__text"
+                    id="channelMemberCountText"
+                  >
+                    -
+                  </span>
+                </React.Fragment>
+              }
+              onClick={[Function]}
+              tooltipKey="channelMembers"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="channelHeaderPinButton"
+              iconComponent={
                 <i
                   aria-hidden="true"
-                  className="icon icon-account-outline channel-header__members"
+                  className="icon icon-pin-outline channel-header__pin"
                 />
-                <span
-                  className="icon__text"
-                  id="channelMemberCountText"
-                >
-                  -
-                </span>
-              </React.Fragment>
-            }
-            onClick={[Function]}
-            tooltipKey="channelMembers"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderPinButton"
-            iconComponent={
-              <i
-                aria-hidden="true"
-                className="icon icon-pin-outline channel-header__pin"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="pinnedPosts"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderFilesButton"
-            iconComponent={
-              <i
-                className="icon icon-file-text-outline"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="channelFiles"
-          />
-          <div
-            className="header-popover-text-measurer"
-          >
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
               }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
-                }
+              onClick={[Function]}
+              tooltipKey="pinnedPosts"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
+              buttonId="channelHeaderFilesButton"
+              iconComponent={
+                <i
+                  className="icon icon-file-text-outline"
+                />
               }
+              onClick={[Function]}
+              tooltipKey="channelFiles"
             />
           </div>
-          <span
-            className="header-description__text"
-            onClick={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
+          <div
+            className="channel-header__description"
+            dir="auto"
+            id="channelHeaderDescription"
           >
-            <Overlay
-              animation={[Function]}
-              onHide={[Function]}
-              placement="bottom"
-              rootClose={true}
-              show={false}
-              target={null}
+            <div
+              className="header-popover-text-measurer"
             >
-              <Memo(Popover)
-                className="channel-header__popover"
-                id="header-popover"
-                placement="bottom"
-                popoverSize="lg"
-                popoverStyle="info"
-                style={
+              <Connect(Markdown)
+                imageProps={
                   Object {
-                    "maxWidth": 0,
-                    "transform": "translate(0px, 0px)",
+                    "hideUtilities": true,
                   }
                 }
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
+                }
+              />
+            </div>
+            <span
+              className="header-description__text"
+              onClick={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+            >
+              <Overlay
+                animation={[Function]}
+                onHide={[Function]}
+                placement="bottom"
+                rootClose={true}
+                show={false}
+                target={null}
               >
-                <span
-                  onClick={[Function]}
+                <Memo(Popover)
+                  className="channel-header__popover"
+                  id="header-popover"
+                  placement="bottom"
+                  popoverSize="lg"
+                  popoverStyle="info"
+                  style={
+                    Object {
+                      "maxWidth": 16,
+                      "transform": "translate(0px, 0px)",
+                    }
+                  }
                 >
-                  <Connect(Markdown)
-                    imageProps={
-                      Object {
-                        "hideUtilities": true,
+                  <span
+                    onClick={[Function]}
+                  >
+                    <Connect(Markdown)
+                      imageProps={
+                        Object {
+                          "hideUtilities": true,
+                        }
                       }
-                    }
-                    message="header"
-                    options={
-                      Object {
-                        "atMentions": true,
-                        "channelNamesMap": undefined,
-                        "mentionHighlight": false,
-                        "singleline": false,
+                      message="header"
+                      options={
+                        Object {
+                          "atMentions": true,
+                          "channelNamesMap": undefined,
+                          "mentionHighlight": false,
+                          "singleline": false,
+                        }
                       }
-                    }
-                  />
-                </span>
-              </Memo(Popover)>
-            </Overlay>
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
+                    />
+                  </span>
+                </Memo(Popover)>
+              </Overlay>
+              <Connect(Markdown)
+                imageProps={
+                  Object {
+                    "hideUtilities": true,
+                  }
                 }
-              }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
                 }
-              }
-            />
-          </span>
+              />
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -1781,179 +1784,181 @@ exports[`components/ChannelHeader should render correct menu when muted 1`] = `
         <div
           className="channel-header__title dropdown"
         >
-          <div>
-            <Memo(ChannelHeaderTitle) />
-          </div>
-          <OverlayTrigger
-            defaultOverlayShown={false}
-            delayShow={400}
-            overlay={
-              <Tooltip
-                id="channelMutedTooltip"
-              >
-                <Memo(MemoizedFormattedMessage)
-                  defaultMessage="Unmute"
-                  id="channelHeader.unmute"
-                />
-              </Tooltip>
-            }
-            placement="bottom"
-            trigger={
-              Array [
-                "hover",
-                "focus",
-              ]
-            }
+          <Memo(ChannelHeaderTitle) />
+          <div
+            className="channel-header__icons"
           >
-            <button
-              aria-label="Muted Icon"
-              className="style--none color--link channel-header__mute inactive"
-              id="toggleMute"
-              onClick={[Function]}
+            <OverlayTrigger
+              defaultOverlayShown={false}
+              delayShow={400}
+              overlay={
+                <Tooltip
+                  id="channelMutedTooltip"
+                >
+                  <Memo(MemoizedFormattedMessage)
+                    defaultMessage="Unmute"
+                    id="channelHeader.unmute"
+                  />
+                </Tooltip>
+              }
+              placement="bottom"
+              trigger={
+                Array [
+                  "hover",
+                  "focus",
+                ]
+              }
             >
-              <i
-                className="icon icon-bell-off-outline"
-              />
-            </button>
-          </OverlayTrigger>
-        </div>
-        <div
-          className="channel-header__description"
-          dir="auto"
-          id="channelHeaderDescription"
-        >
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
-            buttonId="member_rhs"
-            iconComponent={
-              <React.Fragment>
+              <button
+                aria-label="Muted Icon"
+                className="channel-header__mute inactive btn btn-icon btn-xs"
+                id="toggleMute"
+                onClick={[Function]}
+              >
+                <i
+                  className="icon icon-bell-off-outline"
+                />
+              </button>
+            </OverlayTrigger>
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="member_rhs"
+              iconComponent={
+                <React.Fragment>
+                  <i
+                    aria-hidden="true"
+                    className="icon icon-account-outline channel-header__members"
+                  />
+                  <span
+                    className="icon__text"
+                    id="channelMemberCountText"
+                  >
+                    -
+                  </span>
+                </React.Fragment>
+              }
+              onClick={[Function]}
+              tooltipKey="channelMembers"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="channelHeaderPinButton"
+              iconComponent={
                 <i
                   aria-hidden="true"
-                  className="icon icon-account-outline channel-header__members"
+                  className="icon icon-pin-outline channel-header__pin"
                 />
-                <span
-                  className="icon__text"
-                  id="channelMemberCountText"
-                >
-                  -
-                </span>
-              </React.Fragment>
-            }
-            onClick={[Function]}
-            tooltipKey="channelMembers"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderPinButton"
-            iconComponent={
-              <i
-                aria-hidden="true"
-                className="icon icon-pin-outline channel-header__pin"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="pinnedPosts"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderFilesButton"
-            iconComponent={
-              <i
-                className="icon icon-file-text-outline"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="channelFiles"
-          />
-          <div
-            className="header-popover-text-measurer"
-          >
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
               }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
-                }
+              onClick={[Function]}
+              tooltipKey="pinnedPosts"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
+              buttonId="channelHeaderFilesButton"
+              iconComponent={
+                <i
+                  className="icon icon-file-text-outline"
+                />
               }
+              onClick={[Function]}
+              tooltipKey="channelFiles"
             />
           </div>
-          <span
-            className="header-description__text"
-            onClick={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
+          <div
+            className="channel-header__description"
+            dir="auto"
+            id="channelHeaderDescription"
           >
-            <Overlay
-              animation={[Function]}
-              onHide={[Function]}
-              placement="bottom"
-              rootClose={true}
-              show={false}
-              target={null}
+            <div
+              className="header-popover-text-measurer"
             >
-              <Memo(Popover)
-                className="channel-header__popover"
-                id="header-popover"
-                placement="bottom"
-                popoverSize="lg"
-                popoverStyle="info"
-                style={
+              <Connect(Markdown)
+                imageProps={
                   Object {
-                    "maxWidth": 0,
-                    "transform": "translate(0px, 0px)",
+                    "hideUtilities": true,
                   }
                 }
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
+                }
+              />
+            </div>
+            <span
+              className="header-description__text"
+              onClick={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+            >
+              <Overlay
+                animation={[Function]}
+                onHide={[Function]}
+                placement="bottom"
+                rootClose={true}
+                show={false}
+                target={null}
               >
-                <span
-                  onClick={[Function]}
+                <Memo(Popover)
+                  className="channel-header__popover"
+                  id="header-popover"
+                  placement="bottom"
+                  popoverSize="lg"
+                  popoverStyle="info"
+                  style={
+                    Object {
+                      "maxWidth": 16,
+                      "transform": "translate(0px, 0px)",
+                    }
+                  }
                 >
-                  <Connect(Markdown)
-                    imageProps={
-                      Object {
-                        "hideUtilities": true,
+                  <span
+                    onClick={[Function]}
+                  >
+                    <Connect(Markdown)
+                      imageProps={
+                        Object {
+                          "hideUtilities": true,
+                        }
                       }
-                    }
-                    message="header"
-                    options={
-                      Object {
-                        "atMentions": true,
-                        "channelNamesMap": undefined,
-                        "mentionHighlight": false,
-                        "singleline": false,
+                      message="header"
+                      options={
+                        Object {
+                          "atMentions": true,
+                          "channelNamesMap": undefined,
+                          "mentionHighlight": false,
+                          "singleline": false,
+                        }
                       }
-                    }
-                  />
-                </span>
-              </Memo(Popover)>
-            </Overlay>
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
+                    />
+                  </span>
+                </Memo(Popover)>
+              </Overlay>
+              <Connect(Markdown)
+                imageProps={
+                  Object {
+                    "hideUtilities": true,
+                  }
                 }
-              }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
                 }
-              }
-            />
-          </span>
+              />
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -2051,147 +2056,149 @@ exports[`components/ChannelHeader should render not active channel files 1`] = `
         <div
           className="channel-header__title dropdown"
         >
-          <div>
-            <Memo(ChannelHeaderTitle) />
-          </div>
-        </div>
-        <div
-          className="channel-header__description"
-          dir="auto"
-          id="channelHeaderDescription"
-        >
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
-            buttonId="member_rhs"
-            iconComponent={
-              <React.Fragment>
+          <Memo(ChannelHeaderTitle) />
+          <div
+            className="channel-header__icons"
+          >
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="member_rhs"
+              iconComponent={
+                <React.Fragment>
+                  <i
+                    aria-hidden="true"
+                    className="icon icon-account-outline channel-header__members"
+                  />
+                  <span
+                    className="icon__text"
+                    id="channelMemberCountText"
+                  >
+                    -
+                  </span>
+                </React.Fragment>
+              }
+              onClick={[Function]}
+              tooltipKey="channelMembers"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs channel-header__icon--active"
+              buttonId="channelHeaderPinButton"
+              iconComponent={
                 <i
                   aria-hidden="true"
-                  className="icon icon-account-outline channel-header__members"
+                  className="icon icon-pin-outline channel-header__pin"
                 />
-                <span
-                  className="icon__text"
-                  id="channelMemberCountText"
-                >
-                  -
-                </span>
-              </React.Fragment>
-            }
-            onClick={[Function]}
-            tooltipKey="channelMembers"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left channel-header__icon--active"
-            buttonId="channelHeaderPinButton"
-            iconComponent={
-              <i
-                aria-hidden="true"
-                className="icon icon-pin-outline channel-header__pin"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="pinnedPosts"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderFilesButton"
-            iconComponent={
-              <i
-                className="icon icon-file-text-outline"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="channelFiles"
-          />
-          <div
-            className="header-popover-text-measurer"
-          >
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
               }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
-                }
+              onClick={[Function]}
+              tooltipKey="pinnedPosts"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
+              buttonId="channelHeaderFilesButton"
+              iconComponent={
+                <i
+                  className="icon icon-file-text-outline"
+                />
               }
+              onClick={[Function]}
+              tooltipKey="channelFiles"
             />
           </div>
-          <span
-            className="header-description__text"
-            onClick={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
+          <div
+            className="channel-header__description"
+            dir="auto"
+            id="channelHeaderDescription"
           >
-            <Overlay
-              animation={[Function]}
-              onHide={[Function]}
-              placement="bottom"
-              rootClose={true}
-              show={false}
-              target={null}
+            <div
+              className="header-popover-text-measurer"
             >
-              <Memo(Popover)
-                className="channel-header__popover"
-                id="header-popover"
-                placement="bottom"
-                popoverSize="lg"
-                popoverStyle="info"
-                style={
+              <Connect(Markdown)
+                imageProps={
                   Object {
-                    "maxWidth": 0,
-                    "transform": "translate(0px, 0px)",
+                    "hideUtilities": true,
                   }
                 }
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
+                }
+              />
+            </div>
+            <span
+              className="header-description__text"
+              onClick={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+            >
+              <Overlay
+                animation={[Function]}
+                onHide={[Function]}
+                placement="bottom"
+                rootClose={true}
+                show={false}
+                target={null}
               >
-                <span
-                  onClick={[Function]}
+                <Memo(Popover)
+                  className="channel-header__popover"
+                  id="header-popover"
+                  placement="bottom"
+                  popoverSize="lg"
+                  popoverStyle="info"
+                  style={
+                    Object {
+                      "maxWidth": 16,
+                      "transform": "translate(0px, 0px)",
+                    }
+                  }
                 >
-                  <Connect(Markdown)
-                    imageProps={
-                      Object {
-                        "hideUtilities": true,
+                  <span
+                    onClick={[Function]}
+                  >
+                    <Connect(Markdown)
+                      imageProps={
+                        Object {
+                          "hideUtilities": true,
+                        }
                       }
-                    }
-                    message="header"
-                    options={
-                      Object {
-                        "atMentions": true,
-                        "channelNamesMap": undefined,
-                        "mentionHighlight": false,
-                        "singleline": false,
+                      message="header"
+                      options={
+                        Object {
+                          "atMentions": true,
+                          "channelNamesMap": undefined,
+                          "mentionHighlight": false,
+                          "singleline": false,
+                        }
                       }
-                    }
-                  />
-                </span>
-              </Memo(Popover)>
-            </Overlay>
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
+                    />
+                  </span>
+                </Memo(Popover)>
+              </Overlay>
+              <Connect(Markdown)
+                imageProps={
+                  Object {
+                    "hideUtilities": true,
+                  }
                 }
-              }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
                 }
-              }
-            />
-          </span>
+              />
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -2289,199 +2296,198 @@ exports[`components/ChannelHeader should render properly when custom status is e
         <div
           className="channel-header__title dropdown"
         >
-          <div>
-            <Memo(ChannelHeaderTitle)
-              dmUser={
-                Object {
-                  "auth_service": "",
-                  "bot_description": "",
-                  "create_at": 0,
-                  "delete_at": 0,
-                  "email": "",
-                  "first_name": "",
-                  "id": "user_id",
-                  "is_bot": false,
-                  "last_activity_at": 0,
-                  "last_name": "",
-                  "last_password_update": 0,
-                  "last_picture_update": 0,
-                  "locale": "",
-                  "mfa_active": false,
-                  "nickname": "",
-                  "notify_props": Object {
-                    "calls_desktop_sound": "true",
-                    "channel": "false",
-                    "comments": "never",
-                    "desktop": "default",
-                    "desktop_sound": "false",
-                    "email": "false",
-                    "first_name": "false",
-                    "highlight_keys": "",
-                    "mark_unread": "mention",
-                    "mention_keys": "",
-                    "push": "none",
-                    "push_status": "offline",
-                  },
-                  "password": "",
-                  "position": "",
-                  "props": Object {},
-                  "roles": "",
-                  "terms_of_service_create_at": 0,
-                  "terms_of_service_id": "",
-                  "update_at": 0,
-                  "username": "some-user",
-                }
+          <Memo(ChannelHeaderTitle)
+            dmUser={
+              Object {
+                "auth_service": "",
+                "bot_description": "",
+                "create_at": 0,
+                "delete_at": 0,
+                "email": "",
+                "first_name": "",
+                "id": "user_id",
+                "is_bot": false,
+                "last_activity_at": 0,
+                "last_name": "",
+                "last_password_update": 0,
+                "last_picture_update": 0,
+                "locale": "",
+                "mfa_active": false,
+                "nickname": "",
+                "notify_props": Object {
+                  "calls_desktop_sound": "true",
+                  "channel": "false",
+                  "comments": "never",
+                  "desktop": "default",
+                  "desktop_sound": "false",
+                  "email": "false",
+                  "first_name": "false",
+                  "highlight_keys": "",
+                  "mark_unread": "mention",
+                  "mention_keys": "",
+                  "push": "none",
+                  "push_status": "offline",
+                },
+                "password": "",
+                "position": "",
+                "props": Object {},
+                "roles": "",
+                "terms_of_service_create_at": 0,
+                "terms_of_service_id": "",
+                "update_at": 0,
+                "username": "some-user",
               }
+            }
+          />
+          <div
+            className="channel-header__icons"
+          >
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="channelHeaderPinButton"
+              iconComponent={
+                <i
+                  aria-hidden="true"
+                  className="icon icon-pin-outline channel-header__pin"
+                />
+              }
+              onClick={[Function]}
+              tooltipKey="pinnedPosts"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
+              buttonId="channelHeaderFilesButton"
+              iconComponent={
+                <i
+                  className="icon icon-file-text-outline"
+                />
+              }
+              onClick={[Function]}
+              tooltipKey="channelFiles"
             />
           </div>
-        </div>
-        <div
-          className="channel-header__description"
-          dir="auto"
-          id="channelHeaderDescription"
-        >
-          <Memo(StatusIcon)
-            status="offline"
-          />
-          <span
-            className="header-status__text"
+          <div
+            className="channel-header__description"
+            dir="auto"
+            id="channelHeaderDescription"
           >
             <span
-              className="last-active__text"
+              className="header-status__text"
             >
-              <MemoizedFormattedMessage
-                defaultMessage="Active {timestamp}"
-                id="channel_header.lastActive"
-                values={
+              <span
+                className="last-active__text"
+              >
+                <MemoizedFormattedMessage
+                  defaultMessage="Active {timestamp}"
+                  id="channel_header.lastActive"
+                  values={
+                    Object {
+                      "timestamp": <Memo(Connect(injectIntl(Timestamp)))
+                        style="short"
+                        units={
+                          Array [
+                            "now",
+                            "minute",
+                            "hour",
+                          ]
+                        }
+                        useTime={false}
+                        value={1632146562846}
+                      />,
+                    }
+                  }
+                />
+              </span>
+            </span>
+            <div
+              className="header-popover-text-measurer"
+            >
+              <Connect(Markdown)
+                imageProps={
                   Object {
-                    "timestamp": <Memo(Connect(injectIntl(Timestamp)))
-                      style="short"
-                      units={
-                        Array [
-                          "now",
-                          "minute",
-                          "hour",
-                        ]
+                    "hideUtilities": true,
+                  }
+                }
+                message="not the bot description"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
+                }
+              />
+            </div>
+            <span
+              className="header-description__text"
+              onClick={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+            >
+              <Overlay
+                animation={[Function]}
+                onHide={[Function]}
+                placement="bottom"
+                rootClose={true}
+                show={false}
+                target={null}
+              >
+                <Memo(Popover)
+                  className="channel-header__popover"
+                  id="header-popover"
+                  placement="bottom"
+                  popoverSize="lg"
+                  popoverStyle="info"
+                  style={
+                    Object {
+                      "maxWidth": 16,
+                      "transform": "translate(0px, 0px)",
+                    }
+                  }
+                >
+                  <span
+                    onClick={[Function]}
+                  >
+                    <Connect(Markdown)
+                      imageProps={
+                        Object {
+                          "hideUtilities": true,
+                        }
                       }
-                      useTime={false}
-                      value={1632146562846}
-                    />,
+                      message="not the bot description"
+                      options={
+                        Object {
+                          "atMentions": true,
+                          "channelNamesMap": undefined,
+                          "mentionHighlight": false,
+                          "singleline": false,
+                        }
+                      }
+                    />
+                  </span>
+                </Memo(Popover)>
+              </Overlay>
+              <Connect(Markdown)
+                imageProps={
+                  Object {
+                    "hideUtilities": true,
+                  }
+                }
+                message="not the bot description"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
                   }
                 }
               />
             </span>
-          </span>
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderPinButton"
-            iconComponent={
-              <i
-                aria-hidden="true"
-                className="icon icon-pin-outline channel-header__pin"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="pinnedPosts"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderFilesButton"
-            iconComponent={
-              <i
-                className="icon icon-file-text-outline"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="channelFiles"
-          />
-          <div
-            className="header-popover-text-measurer"
-          >
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
-              }
-              message="not the bot description"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
-                }
-              }
-            />
           </div>
-          <span
-            className="header-description__text"
-            onClick={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-          >
-            <Overlay
-              animation={[Function]}
-              onHide={[Function]}
-              placement="bottom"
-              rootClose={true}
-              show={false}
-              target={null}
-            >
-              <Memo(Popover)
-                className="channel-header__popover"
-                id="header-popover"
-                placement="bottom"
-                popoverSize="lg"
-                popoverStyle="info"
-                style={
-                  Object {
-                    "maxWidth": 0,
-                    "transform": "translate(0px, 0px)",
-                  }
-                }
-              >
-                <span
-                  onClick={[Function]}
-                >
-                  <Connect(Markdown)
-                    imageProps={
-                      Object {
-                        "hideUtilities": true,
-                      }
-                    }
-                    message="not the bot description"
-                    options={
-                      Object {
-                        "atMentions": true,
-                        "channelNamesMap": undefined,
-                        "mentionHighlight": false,
-                        "singleline": false,
-                      }
-                    }
-                  />
-                </span>
-              </Memo(Popover)>
-            </Overlay>
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
-              }
-              message="not the bot description"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
-                }
-              }
-            />
-          </span>
         </div>
       </div>
     </div>
@@ -2581,219 +2587,218 @@ exports[`components/ChannelHeader should render properly when custom status is s
         <div
           className="channel-header__title dropdown"
         >
-          <div>
-            <Memo(ChannelHeaderTitle)
-              dmUser={
-                Object {
-                  "auth_service": "",
-                  "bot_description": "",
-                  "create_at": 0,
-                  "delete_at": 0,
-                  "email": "",
-                  "first_name": "",
-                  "id": "user_id",
-                  "is_bot": false,
-                  "last_activity_at": 0,
-                  "last_name": "",
-                  "last_password_update": 0,
-                  "last_picture_update": 0,
-                  "locale": "",
-                  "mfa_active": false,
-                  "nickname": "",
-                  "notify_props": Object {
-                    "calls_desktop_sound": "true",
-                    "channel": "false",
-                    "comments": "never",
-                    "desktop": "default",
-                    "desktop_sound": "false",
-                    "email": "false",
-                    "first_name": "false",
-                    "highlight_keys": "",
-                    "mark_unread": "mention",
-                    "mention_keys": "",
-                    "push": "none",
-                    "push_status": "offline",
-                  },
-                  "password": "",
-                  "position": "",
-                  "props": Object {},
-                  "roles": "",
-                  "terms_of_service_create_at": 0,
-                  "terms_of_service_id": "",
-                  "update_at": 0,
-                  "username": "some-user",
-                }
+          <Memo(ChannelHeaderTitle)
+            dmUser={
+              Object {
+                "auth_service": "",
+                "bot_description": "",
+                "create_at": 0,
+                "delete_at": 0,
+                "email": "",
+                "first_name": "",
+                "id": "user_id",
+                "is_bot": false,
+                "last_activity_at": 0,
+                "last_name": "",
+                "last_password_update": 0,
+                "last_picture_update": 0,
+                "locale": "",
+                "mfa_active": false,
+                "nickname": "",
+                "notify_props": Object {
+                  "calls_desktop_sound": "true",
+                  "channel": "false",
+                  "comments": "never",
+                  "desktop": "default",
+                  "desktop_sound": "false",
+                  "email": "false",
+                  "first_name": "false",
+                  "highlight_keys": "",
+                  "mark_unread": "mention",
+                  "mention_keys": "",
+                  "push": "none",
+                  "push_status": "offline",
+                },
+                "password": "",
+                "position": "",
+                "props": Object {},
+                "roles": "",
+                "terms_of_service_create_at": 0,
+                "terms_of_service_id": "",
+                "update_at": 0,
+                "username": "some-user",
               }
+            }
+          />
+          <div
+            className="channel-header__icons"
+          >
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="channelHeaderPinButton"
+              iconComponent={
+                <i
+                  aria-hidden="true"
+                  className="icon icon-pin-outline channel-header__pin"
+                />
+              }
+              onClick={[Function]}
+              tooltipKey="pinnedPosts"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
+              buttonId="channelHeaderFilesButton"
+              iconComponent={
+                <i
+                  className="icon icon-file-text-outline"
+                />
+              }
+              onClick={[Function]}
+              tooltipKey="channelFiles"
             />
           </div>
-        </div>
-        <div
-          className="channel-header__description"
-          dir="auto"
-          id="channelHeaderDescription"
-        >
-          <Memo(StatusIcon)
-            status="offline"
-          />
-          <span
-            className="header-status__text"
+          <div
+            className="channel-header__description"
+            dir="auto"
+            id="channelHeaderDescription"
           >
             <span
-              className="last-active__text"
+              className="header-status__text"
             >
-              <MemoizedFormattedMessage
-                defaultMessage="Active {timestamp}"
-                id="channel_header.lastActive"
-                values={
+              <span
+                className="last-active__text"
+              >
+                <MemoizedFormattedMessage
+                  defaultMessage="Active {timestamp}"
+                  id="channel_header.lastActive"
+                  values={
+                    Object {
+                      "timestamp": <Memo(Connect(injectIntl(Timestamp)))
+                        style="short"
+                        units={
+                          Array [
+                            "now",
+                            "minute",
+                            "hour",
+                          ]
+                        }
+                        useTime={false}
+                        value={1632146562846}
+                      />,
+                    }
+                  }
+                />
+              </span>
+              <div
+                className="custom-emoji__wrapper"
+              >
+                <Memo(CustomStatusEmoji)
+                  emojiStyle={
+                    Object {
+                      "margin": "0 4px 1px",
+                      "verticalAlign": "top",
+                    }
+                  }
+                  showTooltip={true}
+                  tooltipDirection="bottom"
+                  userID="user_id"
+                />
+                <CustomStatusText
+                  className="custom-emoji__text"
+                  text="In a meeting"
+                  tooltipDirection="bottom"
+                />
+              </div>
+            </span>
+            <div
+              className="header-popover-text-measurer"
+            >
+              <Connect(Markdown)
+                imageProps={
                   Object {
-                    "timestamp": <Memo(Connect(injectIntl(Timestamp)))
-                      style="short"
-                      units={
-                        Array [
-                          "now",
-                          "minute",
-                          "hour",
-                        ]
+                    "hideUtilities": true,
+                  }
+                }
+                message="not the bot description"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
+                }
+              />
+            </div>
+            <span
+              className="header-description__text"
+              onClick={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+            >
+              <Overlay
+                animation={[Function]}
+                onHide={[Function]}
+                placement="bottom"
+                rootClose={true}
+                show={false}
+                target={null}
+              >
+                <Memo(Popover)
+                  className="channel-header__popover"
+                  id="header-popover"
+                  placement="bottom"
+                  popoverSize="lg"
+                  popoverStyle="info"
+                  style={
+                    Object {
+                      "maxWidth": 16,
+                      "transform": "translate(0px, 0px)",
+                    }
+                  }
+                >
+                  <span
+                    onClick={[Function]}
+                  >
+                    <Connect(Markdown)
+                      imageProps={
+                        Object {
+                          "hideUtilities": true,
+                        }
                       }
-                      useTime={false}
-                      value={1632146562846}
-                    />,
+                      message="not the bot description"
+                      options={
+                        Object {
+                          "atMentions": true,
+                          "channelNamesMap": undefined,
+                          "mentionHighlight": false,
+                          "singleline": false,
+                        }
+                      }
+                    />
+                  </span>
+                </Memo(Popover)>
+              </Overlay>
+              <Connect(Markdown)
+                imageProps={
+                  Object {
+                    "hideUtilities": true,
+                  }
+                }
+                message="not the bot description"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
                   }
                 }
               />
             </span>
-            <div
-              className="custom-emoji__wrapper"
-            >
-              <Memo(CustomStatusEmoji)
-                emojiStyle={
-                  Object {
-                    "margin": "0 4px 1px",
-                    "verticalAlign": "top",
-                  }
-                }
-                showTooltip={true}
-                tooltipDirection="bottom"
-                userID="user_id"
-              />
-              <CustomStatusText
-                className=""
-                text="In a meeting"
-                tooltipDirection="bottom"
-              />
-            </div>
-          </span>
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderPinButton"
-            iconComponent={
-              <i
-                aria-hidden="true"
-                className="icon icon-pin-outline channel-header__pin"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="pinnedPosts"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderFilesButton"
-            iconComponent={
-              <i
-                className="icon icon-file-text-outline"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="channelFiles"
-          />
-          <div
-            className="header-popover-text-measurer"
-          >
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
-              }
-              message="not the bot description"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
-                }
-              }
-            />
           </div>
-          <span
-            className="header-description__text"
-            onClick={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-          >
-            <Overlay
-              animation={[Function]}
-              onHide={[Function]}
-              placement="bottom"
-              rootClose={true}
-              show={false}
-              target={null}
-            >
-              <Memo(Popover)
-                className="channel-header__popover"
-                id="header-popover"
-                placement="bottom"
-                popoverSize="lg"
-                popoverStyle="info"
-                style={
-                  Object {
-                    "maxWidth": 0,
-                    "transform": "translate(0px, 0px)",
-                  }
-                }
-              >
-                <span
-                  onClick={[Function]}
-                >
-                  <Connect(Markdown)
-                    imageProps={
-                      Object {
-                        "hideUtilities": true,
-                      }
-                    }
-                    message="not the bot description"
-                    options={
-                      Object {
-                        "atMentions": true,
-                        "channelNamesMap": undefined,
-                        "mentionHighlight": false,
-                        "singleline": false,
-                      }
-                    }
-                  />
-                </span>
-              </Memo(Popover)>
-            </Overlay>
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
-              }
-              message="not the bot description"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
-                }
-              }
-            />
-          </span>
         </div>
       </div>
     </div>
@@ -2893,147 +2898,149 @@ exports[`components/ChannelHeader should render properly when empty 1`] = `
         <div
           className="channel-header__title dropdown"
         >
-          <div>
-            <Memo(ChannelHeaderTitle) />
-          </div>
-        </div>
-        <div
-          className="channel-header__description"
-          dir="auto"
-          id="channelHeaderDescription"
-        >
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
-            buttonId="member_rhs"
-            iconComponent={
-              <React.Fragment>
+          <Memo(ChannelHeaderTitle) />
+          <div
+            className="channel-header__icons"
+          >
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="member_rhs"
+              iconComponent={
+                <React.Fragment>
+                  <i
+                    aria-hidden="true"
+                    className="icon icon-account-outline channel-header__members"
+                  />
+                  <span
+                    className="icon__text"
+                    id="channelMemberCountText"
+                  >
+                    -
+                  </span>
+                </React.Fragment>
+              }
+              onClick={[Function]}
+              tooltipKey="channelMembers"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="channelHeaderPinButton"
+              iconComponent={
                 <i
                   aria-hidden="true"
-                  className="icon icon-account-outline channel-header__members"
+                  className="icon icon-pin-outline channel-header__pin"
                 />
-                <span
-                  className="icon__text"
-                  id="channelMemberCountText"
-                >
-                  -
-                </span>
-              </React.Fragment>
-            }
-            onClick={[Function]}
-            tooltipKey="channelMembers"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderPinButton"
-            iconComponent={
-              <i
-                aria-hidden="true"
-                className="icon icon-pin-outline channel-header__pin"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="pinnedPosts"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderFilesButton"
-            iconComponent={
-              <i
-                className="icon icon-file-text-outline"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="channelFiles"
-          />
-          <div
-            className="header-popover-text-measurer"
-          >
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
               }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
-                }
+              onClick={[Function]}
+              tooltipKey="pinnedPosts"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
+              buttonId="channelHeaderFilesButton"
+              iconComponent={
+                <i
+                  className="icon icon-file-text-outline"
+                />
               }
+              onClick={[Function]}
+              tooltipKey="channelFiles"
             />
           </div>
-          <span
-            className="header-description__text"
-            onClick={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
+          <div
+            className="channel-header__description"
+            dir="auto"
+            id="channelHeaderDescription"
           >
-            <Overlay
-              animation={[Function]}
-              onHide={[Function]}
-              placement="bottom"
-              rootClose={true}
-              show={false}
-              target={null}
+            <div
+              className="header-popover-text-measurer"
             >
-              <Memo(Popover)
-                className="channel-header__popover"
-                id="header-popover"
-                placement="bottom"
-                popoverSize="lg"
-                popoverStyle="info"
-                style={
+              <Connect(Markdown)
+                imageProps={
                   Object {
-                    "maxWidth": 0,
-                    "transform": "translate(0px, 0px)",
+                    "hideUtilities": true,
                   }
                 }
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
+                }
+              />
+            </div>
+            <span
+              className="header-description__text"
+              onClick={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+            >
+              <Overlay
+                animation={[Function]}
+                onHide={[Function]}
+                placement="bottom"
+                rootClose={true}
+                show={false}
+                target={null}
               >
-                <span
-                  onClick={[Function]}
+                <Memo(Popover)
+                  className="channel-header__popover"
+                  id="header-popover"
+                  placement="bottom"
+                  popoverSize="lg"
+                  popoverStyle="info"
+                  style={
+                    Object {
+                      "maxWidth": 16,
+                      "transform": "translate(0px, 0px)",
+                    }
+                  }
                 >
-                  <Connect(Markdown)
-                    imageProps={
-                      Object {
-                        "hideUtilities": true,
+                  <span
+                    onClick={[Function]}
+                  >
+                    <Connect(Markdown)
+                      imageProps={
+                        Object {
+                          "hideUtilities": true,
+                        }
                       }
-                    }
-                    message="header"
-                    options={
-                      Object {
-                        "atMentions": true,
-                        "channelNamesMap": undefined,
-                        "mentionHighlight": false,
-                        "singleline": false,
+                      message="header"
+                      options={
+                        Object {
+                          "atMentions": true,
+                          "channelNamesMap": undefined,
+                          "mentionHighlight": false,
+                          "singleline": false,
+                        }
                       }
-                    }
-                  />
-                </span>
-              </Memo(Popover)>
-            </Overlay>
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
+                    />
+                  </span>
+                </Memo(Popover)>
+              </Overlay>
+              <Connect(Markdown)
+                imageProps={
+                  Object {
+                    "hideUtilities": true,
+                  }
                 }
-              }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
                 }
-              }
-            />
-          </span>
+              />
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -3131,147 +3138,149 @@ exports[`components/ChannelHeader should render properly when populated 1`] = `
         <div
           className="channel-header__title dropdown"
         >
-          <div>
-            <Memo(ChannelHeaderTitle) />
-          </div>
-        </div>
-        <div
-          className="channel-header__description"
-          dir="auto"
-          id="channelHeaderDescription"
-        >
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
-            buttonId="member_rhs"
-            iconComponent={
-              <React.Fragment>
+          <Memo(ChannelHeaderTitle) />
+          <div
+            className="channel-header__icons"
+          >
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="member_rhs"
+              iconComponent={
+                <React.Fragment>
+                  <i
+                    aria-hidden="true"
+                    className="icon icon-account-outline channel-header__members"
+                  />
+                  <span
+                    className="icon__text"
+                    id="channelMemberCountText"
+                  >
+                    -
+                  </span>
+                </React.Fragment>
+              }
+              onClick={[Function]}
+              tooltipKey="channelMembers"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="channelHeaderPinButton"
+              iconComponent={
                 <i
                   aria-hidden="true"
-                  className="icon icon-account-outline channel-header__members"
+                  className="icon icon-pin-outline channel-header__pin"
                 />
-                <span
-                  className="icon__text"
-                  id="channelMemberCountText"
-                >
-                  -
-                </span>
-              </React.Fragment>
-            }
-            onClick={[Function]}
-            tooltipKey="channelMembers"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderPinButton"
-            iconComponent={
-              <i
-                aria-hidden="true"
-                className="icon icon-pin-outline channel-header__pin"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="pinnedPosts"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderFilesButton"
-            iconComponent={
-              <i
-                className="icon icon-file-text-outline"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="channelFiles"
-          />
-          <div
-            className="header-popover-text-measurer"
-          >
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
               }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
-                }
+              onClick={[Function]}
+              tooltipKey="pinnedPosts"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
+              buttonId="channelHeaderFilesButton"
+              iconComponent={
+                <i
+                  className="icon icon-file-text-outline"
+                />
               }
+              onClick={[Function]}
+              tooltipKey="channelFiles"
             />
           </div>
-          <span
-            className="header-description__text"
-            onClick={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
+          <div
+            className="channel-header__description"
+            dir="auto"
+            id="channelHeaderDescription"
           >
-            <Overlay
-              animation={[Function]}
-              onHide={[Function]}
-              placement="bottom"
-              rootClose={true}
-              show={false}
-              target={null}
+            <div
+              className="header-popover-text-measurer"
             >
-              <Memo(Popover)
-                className="channel-header__popover"
-                id="header-popover"
-                placement="bottom"
-                popoverSize="lg"
-                popoverStyle="info"
-                style={
+              <Connect(Markdown)
+                imageProps={
                   Object {
-                    "maxWidth": 0,
-                    "transform": "translate(0px, 0px)",
+                    "hideUtilities": true,
                   }
                 }
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
+                }
+              />
+            </div>
+            <span
+              className="header-description__text"
+              onClick={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+            >
+              <Overlay
+                animation={[Function]}
+                onHide={[Function]}
+                placement="bottom"
+                rootClose={true}
+                show={false}
+                target={null}
               >
-                <span
-                  onClick={[Function]}
+                <Memo(Popover)
+                  className="channel-header__popover"
+                  id="header-popover"
+                  placement="bottom"
+                  popoverSize="lg"
+                  popoverStyle="info"
+                  style={
+                    Object {
+                      "maxWidth": 16,
+                      "transform": "translate(0px, 0px)",
+                    }
+                  }
                 >
-                  <Connect(Markdown)
-                    imageProps={
-                      Object {
-                        "hideUtilities": true,
+                  <span
+                    onClick={[Function]}
+                  >
+                    <Connect(Markdown)
+                      imageProps={
+                        Object {
+                          "hideUtilities": true,
+                        }
                       }
-                    }
-                    message="header"
-                    options={
-                      Object {
-                        "atMentions": true,
-                        "channelNamesMap": undefined,
-                        "mentionHighlight": false,
-                        "singleline": false,
+                      message="header"
+                      options={
+                        Object {
+                          "atMentions": true,
+                          "channelNamesMap": undefined,
+                          "mentionHighlight": false,
+                          "singleline": false,
+                        }
                       }
-                    }
-                  />
-                </span>
-              </Memo(Popover)>
-            </Overlay>
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
+                    />
+                  </span>
+                </Memo(Popover)>
+              </Overlay>
+              <Connect(Markdown)
+                imageProps={
+                  Object {
+                    "hideUtilities": true,
+                  }
                 }
-              }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
                 }
-              }
-            />
-          </span>
+              />
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -3369,159 +3378,161 @@ exports[`components/ChannelHeader should render properly when populated with cha
         <div
           className="channel-header__title dropdown"
         >
-          <div>
-            <Memo(ChannelHeaderTitle) />
-          </div>
-        </div>
-        <div
-          className="channel-header__description"
-          dir="auto"
-          id="channelHeaderDescription"
-        >
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
-            buttonId="member_rhs"
-            iconComponent={
-              <React.Fragment>
+          <Memo(ChannelHeaderTitle) />
+          <div
+            className="channel-header__icons"
+          >
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="member_rhs"
+              iconComponent={
+                <React.Fragment>
+                  <i
+                    aria-hidden="true"
+                    className="icon icon-account-outline channel-header__members"
+                  />
+                  <span
+                    className="icon__text"
+                    id="channelMemberCountText"
+                  >
+                    -
+                  </span>
+                </React.Fragment>
+              }
+              onClick={[Function]}
+              tooltipKey="channelMembers"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="channelHeaderPinButton"
+              iconComponent={
                 <i
                   aria-hidden="true"
-                  className="icon icon-account-outline channel-header__members"
+                  className="icon icon-pin-outline channel-header__pin"
                 />
-                <span
-                  className="icon__text"
-                  id="channelMemberCountText"
-                >
-                  -
-                </span>
-              </React.Fragment>
-            }
-            onClick={[Function]}
-            tooltipKey="channelMembers"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderPinButton"
-            iconComponent={
-              <i
-                aria-hidden="true"
-                className="icon icon-pin-outline channel-header__pin"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="pinnedPosts"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderFilesButton"
-            iconComponent={
-              <i
-                className="icon icon-file-text-outline"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="channelFiles"
-          />
-          <div
-            className="header-popover-text-measurer"
-          >
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
               }
-              message="See ~test"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": Object {
-                    "test": Object {
-                      "display_name": "Test",
-                    },
-                  },
-                  "mentionHighlight": false,
-                  "singleline": true,
-                }
+              onClick={[Function]}
+              tooltipKey="pinnedPosts"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
+              buttonId="channelHeaderFilesButton"
+              iconComponent={
+                <i
+                  className="icon icon-file-text-outline"
+                />
               }
+              onClick={[Function]}
+              tooltipKey="channelFiles"
             />
           </div>
-          <span
-            className="header-description__text"
-            onClick={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
+          <div
+            className="channel-header__description"
+            dir="auto"
+            id="channelHeaderDescription"
           >
-            <Overlay
-              animation={[Function]}
-              onHide={[Function]}
-              placement="bottom"
-              rootClose={true}
-              show={false}
-              target={null}
+            <div
+              className="header-popover-text-measurer"
             >
-              <Memo(Popover)
-                className="channel-header__popover"
-                id="header-popover"
-                placement="bottom"
-                popoverSize="lg"
-                popoverStyle="info"
-                style={
+              <Connect(Markdown)
+                imageProps={
                   Object {
-                    "maxWidth": 0,
-                    "transform": "translate(0px, 0px)",
+                    "hideUtilities": true,
                   }
                 }
-              >
-                <span
-                  onClick={[Function]}
-                >
-                  <Connect(Markdown)
-                    imageProps={
-                      Object {
-                        "hideUtilities": true,
-                      }
-                    }
-                    message="See ~test"
-                    options={
-                      Object {
-                        "atMentions": true,
-                        "channelNamesMap": Object {
-                          "test": Object {
-                            "display_name": "Test",
-                          },
-                        },
-                        "mentionHighlight": false,
-                        "singleline": false,
-                      }
-                    }
-                  />
-                </span>
-              </Memo(Popover)>
-            </Overlay>
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
-              }
-              message="See ~test"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": Object {
-                    "test": Object {
-                      "display_name": "Test",
+                message="See ~test"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": Object {
+                      "test": Object {
+                        "display_name": "Test",
+                      },
                     },
-                  },
-                  "mentionHighlight": false,
-                  "singleline": true,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
                 }
-              }
-            />
-          </span>
+              />
+            </div>
+            <span
+              className="header-description__text"
+              onClick={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+            >
+              <Overlay
+                animation={[Function]}
+                onHide={[Function]}
+                placement="bottom"
+                rootClose={true}
+                show={false}
+                target={null}
+              >
+                <Memo(Popover)
+                  className="channel-header__popover"
+                  id="header-popover"
+                  placement="bottom"
+                  popoverSize="lg"
+                  popoverStyle="info"
+                  style={
+                    Object {
+                      "maxWidth": 16,
+                      "transform": "translate(0px, 0px)",
+                    }
+                  }
+                >
+                  <span
+                    onClick={[Function]}
+                  >
+                    <Connect(Markdown)
+                      imageProps={
+                        Object {
+                          "hideUtilities": true,
+                        }
+                      }
+                      message="See ~test"
+                      options={
+                        Object {
+                          "atMentions": true,
+                          "channelNamesMap": Object {
+                            "test": Object {
+                              "display_name": "Test",
+                            },
+                          },
+                          "mentionHighlight": false,
+                          "singleline": false,
+                        }
+                      }
+                    />
+                  </span>
+                </Memo(Popover)>
+              </Overlay>
+              <Connect(Markdown)
+                imageProps={
+                  Object {
+                    "hideUtilities": true,
+                  }
+                }
+                message="See ~test"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": Object {
+                      "test": Object {
+                        "display_name": "Test",
+                      },
+                    },
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
+                }
+              />
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -3633,147 +3644,149 @@ exports[`components/ChannelHeader should render shared view 1`] = `
         <div
           className="channel-header__title dropdown"
         >
-          <div>
-            <Memo(ChannelHeaderTitle) />
-          </div>
-        </div>
-        <div
-          className="channel-header__description"
-          dir="auto"
-          id="channelHeaderDescription"
-        >
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
-            buttonId="member_rhs"
-            iconComponent={
-              <React.Fragment>
+          <Memo(ChannelHeaderTitle) />
+          <div
+            className="channel-header__icons"
+          >
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="member_rhs"
+              iconComponent={
+                <React.Fragment>
+                  <i
+                    aria-hidden="true"
+                    className="icon icon-account-outline channel-header__members"
+                  />
+                  <span
+                    className="icon__text"
+                    id="channelMemberCountText"
+                  >
+                    -
+                  </span>
+                </React.Fragment>
+              }
+              onClick={[Function]}
+              tooltipKey="channelMembers"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="channelHeaderPinButton"
+              iconComponent={
                 <i
                   aria-hidden="true"
-                  className="icon icon-account-outline channel-header__members"
+                  className="icon icon-pin-outline channel-header__pin"
                 />
-                <span
-                  className="icon__text"
-                  id="channelMemberCountText"
-                >
-                  -
-                </span>
-              </React.Fragment>
-            }
-            onClick={[Function]}
-            tooltipKey="channelMembers"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderPinButton"
-            iconComponent={
-              <i
-                aria-hidden="true"
-                className="icon icon-pin-outline channel-header__pin"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="pinnedPosts"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderFilesButton"
-            iconComponent={
-              <i
-                className="icon icon-file-text-outline"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="channelFiles"
-          />
-          <div
-            className="header-popover-text-measurer"
-          >
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
               }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
-                }
+              onClick={[Function]}
+              tooltipKey="pinnedPosts"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
+              buttonId="channelHeaderFilesButton"
+              iconComponent={
+                <i
+                  className="icon icon-file-text-outline"
+                />
               }
+              onClick={[Function]}
+              tooltipKey="channelFiles"
             />
           </div>
-          <span
-            className="header-description__text"
-            onClick={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
+          <div
+            className="channel-header__description"
+            dir="auto"
+            id="channelHeaderDescription"
           >
-            <Overlay
-              animation={[Function]}
-              onHide={[Function]}
-              placement="bottom"
-              rootClose={true}
-              show={false}
-              target={null}
+            <div
+              className="header-popover-text-measurer"
             >
-              <Memo(Popover)
-                className="channel-header__popover"
-                id="header-popover"
-                placement="bottom"
-                popoverSize="lg"
-                popoverStyle="info"
-                style={
+              <Connect(Markdown)
+                imageProps={
                   Object {
-                    "maxWidth": 0,
-                    "transform": "translate(0px, 0px)",
+                    "hideUtilities": true,
                   }
                 }
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
+                }
+              />
+            </div>
+            <span
+              className="header-description__text"
+              onClick={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+            >
+              <Overlay
+                animation={[Function]}
+                onHide={[Function]}
+                placement="bottom"
+                rootClose={true}
+                show={false}
+                target={null}
               >
-                <span
-                  onClick={[Function]}
+                <Memo(Popover)
+                  className="channel-header__popover"
+                  id="header-popover"
+                  placement="bottom"
+                  popoverSize="lg"
+                  popoverStyle="info"
+                  style={
+                    Object {
+                      "maxWidth": 16,
+                      "transform": "translate(0px, 0px)",
+                    }
+                  }
                 >
-                  <Connect(Markdown)
-                    imageProps={
-                      Object {
-                        "hideUtilities": true,
+                  <span
+                    onClick={[Function]}
+                  >
+                    <Connect(Markdown)
+                      imageProps={
+                        Object {
+                          "hideUtilities": true,
+                        }
                       }
-                    }
-                    message="header"
-                    options={
-                      Object {
-                        "atMentions": true,
-                        "channelNamesMap": undefined,
-                        "mentionHighlight": false,
-                        "singleline": false,
+                      message="header"
+                      options={
+                        Object {
+                          "atMentions": true,
+                          "channelNamesMap": undefined,
+                          "mentionHighlight": false,
+                          "singleline": false,
+                        }
                       }
-                    }
-                  />
-                </span>
-              </Memo(Popover)>
-            </Overlay>
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
+                    />
+                  </span>
+                </Memo(Popover)>
+              </Overlay>
+              <Connect(Markdown)
+                imageProps={
+                  Object {
+                    "hideUtilities": true,
+                  }
                 }
-              }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
                 }
-              }
-            />
-          </span>
+              />
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -3873,155 +3886,157 @@ exports[`components/ChannelHeader should render the pinned icon with the pinned
         <div
           className="channel-header__title dropdown"
         >
-          <div>
-            <Memo(ChannelHeaderTitle) />
-          </div>
-        </div>
-        <div
-          className="channel-header__description"
-          dir="auto"
-          id="channelHeaderDescription"
-        >
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
-            buttonId="member_rhs"
-            iconComponent={
-              <React.Fragment>
-                <i
-                  aria-hidden="true"
-                  className="icon icon-account-outline channel-header__members"
-                />
-                <span
-                  className="icon__text"
-                  id="channelMemberCountText"
-                >
-                  -
-                </span>
-              </React.Fragment>
-            }
-            onClick={[Function]}
-            tooltipKey="channelMembers"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderPinButton"
-            iconComponent={
-              <React.Fragment>
-                <i
-                  aria-hidden="true"
-                  className="icon icon-pin-outline channel-header__pin"
-                />
-                <span
-                  className="icon__text"
-                  id="channelPinnedPostCountText"
-                >
-                  2
-                </span>
-              </React.Fragment>
-            }
-            onClick={[Function]}
-            tooltipKey="pinnedPosts"
-          />
-          <HeaderIconWrapper
-            ariaLabel={true}
-            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
-            buttonId="channelHeaderFilesButton"
-            iconComponent={
-              <i
-                className="icon icon-file-text-outline"
-              />
-            }
-            onClick={[Function]}
-            tooltipKey="channelFiles"
-          />
+          <Memo(ChannelHeaderTitle) />
           <div
-            className="header-popover-text-measurer"
+            className="channel-header__icons"
           >
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
-                }
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="member_rhs"
+              iconComponent={
+                <React.Fragment>
+                  <i
+                    aria-hidden="true"
+                    className="icon icon-account-outline channel-header__members"
+                  />
+                  <span
+                    className="icon__text"
+                    id="channelMemberCountText"
+                  >
+                    -
+                  </span>
+                </React.Fragment>
               }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
-                }
+              onClick={[Function]}
+              tooltipKey="channelMembers"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
+              buttonId="channelHeaderPinButton"
+              iconComponent={
+                <React.Fragment>
+                  <i
+                    aria-hidden="true"
+                    className="icon icon-pin-outline channel-header__pin"
+                  />
+                  <span
+                    className="icon__text"
+                    id="channelPinnedPostCountText"
+                  >
+                    2
+                  </span>
+                </React.Fragment>
               }
+              onClick={[Function]}
+              tooltipKey="pinnedPosts"
+            />
+            <HeaderIconWrapper
+              ariaLabel={true}
+              buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
+              buttonId="channelHeaderFilesButton"
+              iconComponent={
+                <i
+                  className="icon icon-file-text-outline"
+                />
+              }
+              onClick={[Function]}
+              tooltipKey="channelFiles"
             />
           </div>
-          <span
-            className="header-description__text"
-            onClick={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
+          <div
+            className="channel-header__description"
+            dir="auto"
+            id="channelHeaderDescription"
           >
-            <Overlay
-              animation={[Function]}
-              onHide={[Function]}
-              placement="bottom"
-              rootClose={true}
-              show={false}
-              target={null}
+            <div
+              className="header-popover-text-measurer"
             >
-              <Memo(Popover)
-                className="channel-header__popover"
-                id="header-popover"
-                placement="bottom"
-                popoverSize="lg"
-                popoverStyle="info"
-                style={
+              <Connect(Markdown)
+                imageProps={
                   Object {
-                    "maxWidth": 0,
-                    "transform": "translate(0px, 0px)",
+                    "hideUtilities": true,
                   }
                 }
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
+                }
+              />
+            </div>
+            <span
+              className="header-description__text"
+              onClick={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+            >
+              <Overlay
+                animation={[Function]}
+                onHide={[Function]}
+                placement="bottom"
+                rootClose={true}
+                show={false}
+                target={null}
               >
-                <span
-                  onClick={[Function]}
+                <Memo(Popover)
+                  className="channel-header__popover"
+                  id="header-popover"
+                  placement="bottom"
+                  popoverSize="lg"
+                  popoverStyle="info"
+                  style={
+                    Object {
+                      "maxWidth": 16,
+                      "transform": "translate(0px, 0px)",
+                    }
+                  }
                 >
-                  <Connect(Markdown)
-                    imageProps={
-                      Object {
-                        "hideUtilities": true,
+                  <span
+                    onClick={[Function]}
+                  >
+                    <Connect(Markdown)
+                      imageProps={
+                        Object {
+                          "hideUtilities": true,
+                        }
                       }
-                    }
-                    message="header"
-                    options={
-                      Object {
-                        "atMentions": true,
-                        "channelNamesMap": undefined,
-                        "mentionHighlight": false,
-                        "singleline": false,
+                      message="header"
+                      options={
+                        Object {
+                          "atMentions": true,
+                          "channelNamesMap": undefined,
+                          "mentionHighlight": false,
+                          "singleline": false,
+                        }
                       }
-                    }
-                  />
-                </span>
-              </Memo(Popover)>
-            </Overlay>
-            <Connect(Markdown)
-              imageProps={
-                Object {
-                  "hideUtilities": true,
+                    />
+                  </span>
+                </Memo(Popover)>
+              </Overlay>
+              <Connect(Markdown)
+                imageProps={
+                  Object {
+                    "hideUtilities": true,
+                  }
                 }
-              }
-              message="header"
-              options={
-                Object {
-                  "atMentions": true,
-                  "channelNamesMap": undefined,
-                  "mentionHighlight": false,
-                  "singleline": true,
+                message="header"
+                options={
+                  Object {
+                    "atMentions": true,
+                    "channelNamesMap": undefined,
+                    "mentionHighlight": false,
+                    "singleline": true,
+                  }
                 }
-              }
-            />
-          </span>
+              />
+            </span>
+          </div>
         </div>
       </div>
     </div>
diff --git a/webapp/channels/src/components/channel_header/channel_header.tsx b/webapp/channels/src/components/channel_header/channel_header.tsx
index ff441cef9e..8fa732c8fc 100644
--- a/webapp/channels/src/components/channel_header/channel_header.tsx
+++ b/webapp/channels/src/components/channel_header/channel_header.tsx
@@ -21,8 +21,6 @@ import Markdown from 'components/markdown';
 import OverlayTrigger from 'components/overlay_trigger';
 import type {BaseOverlayTrigger} from 'components/overlay_trigger';
 import ChannelPermissionGate from 'components/permissions_gates/channel_permission_gate';
-import {statusDropdownMessages} from 'components/status_dropdown/status_dropdown';
-import StatusIcon from 'components/status_icon';
 import Timestamp from 'components/timestamp';
 import Tooltip from 'components/tooltip';
 import Popover from 'components/widgets/popover';
@@ -241,6 +239,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
                 />
                 <CustomStatusText
                     text={customStatus?.text}
+                    className='custom-emoji__text'
                 />
             </div>
         );
@@ -270,7 +269,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
                     <span tabIndex={0}>
                         <FormattedMessage
                             id='channel_header.channelHasGuests'
-                            defaultMessage='This channel has guests'
+                            defaultMessage='Channel has guests'
                         />
                     </span>
                 </span>
@@ -308,14 +307,10 @@ class ChannelHeader extends React.PureComponent<Props, State> {
             }
         }
 
-        let dmHeaderIconStatus: ReactNode;
         let dmHeaderTextStatus: ReactNode;
         if (isDirect && !dmUser?.delete_at && !dmUser?.is_bot) {
-            dmHeaderIconStatus = (<StatusIcon status={channel.status}/>);
-
             dmHeaderTextStatus = (
                 <span className='header-status__text'>
-                    <FormattedMessage {...statusDropdownMessages[channel.status!].name}/>
                     {this.renderCustomStatus()}
                 </span>
             );
@@ -345,11 +340,11 @@ class ChannelHeader extends React.PureComponent<Props, State> {
             }
         }
 
-        const channelFilesIconClass = classNames('channel-header__icon channel-header__icon--wide channel-header__icon--left', {
+        const channelFilesIconClass = classNames('channel-header__icon channel-header__icon--left btn btn-icon btn-xs ', {
             'channel-header__icon--active': rhsState === RHSStates.CHANNEL_FILES,
         });
         const channelFilesIcon = <i className='icon icon-file-text-outline'/>;
-        const pinnedIconClass = classNames('channel-header__icon channel-header__icon--wide channel-header__icon--left', {
+        const pinnedIconClass = classNames('channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs', {
             'channel-header__icon--active': rhsState === RHSStates.PIN,
         });
         const pinnedIcon = this.props.pinnedPostsCount ? (
@@ -374,7 +369,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
 
         let memberListButton = null;
         if (!isDirect) {
-            const membersIconClass = classNames('member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide', {
+            const membersIconClass = classNames('member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs', {
                 'channel-header__icon--active': rhsState === RHSStates.CHANNEL_MEMBERS,
             });
             const membersIcon = this.props.memberCount ? (
@@ -428,7 +423,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
                     id='header-popover'
                     popoverStyle='info'
                     popoverSize='lg'
-                    style={{transform: `translate(${this.state.leftOffset}px, ${this.state.topOffset}px)`, maxWidth: this.state.channelHeaderPoverWidth}}
+                    style={{transform: `translate(${this.state.leftOffset}px, ${this.state.topOffset}px)`, maxWidth: this.state.channelHeaderPoverWidth + 16}}
                     placement='bottom'
                     className={classNames('channel-header__popover', {'chanel-header__popover--lhs_offset': this.props.hasMoreThanOneTeam})}
                 >
@@ -450,28 +445,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
                     className='channel-header__description'
                     dir='auto'
                 >
-                    {dmHeaderIconStatus}
                     {dmHeaderTextStatus}
-                    {memberListButton}
-
-                    <HeaderIconWrapper
-                        iconComponent={pinnedIcon}
-                        ariaLabel={true}
-                        buttonClass={pinnedIconClass}
-                        buttonId={'channelHeaderPinButton'}
-                        onClick={this.showPinnedPosts}
-                        tooltipKey={'pinnedPosts'}
-                    />
-                    {this.props.isFileAttachmentsEnabled &&
-                        <HeaderIconWrapper
-                            iconComponent={channelFilesIcon}
-                            ariaLabel={true}
-                            buttonClass={channelFilesIconClass}
-                            buttonId={'channelHeaderFilesButton'}
-                            onClick={this.showChannelFiles}
-                            tooltipKey={'channelFiles'}
-                        />
-                    }
                     {hasGuestsText}
                     <div
                         className='header-popover-text-measurer'
@@ -557,30 +531,9 @@ class ChannelHeader extends React.PureComponent<Props, State> {
             headerTextContainer = (
                 <div
                     id='channelHeaderDescription'
-                    className='channel-header__description light'
+                    className='channel-header__description'
                 >
-                    {dmHeaderIconStatus}
                     {dmHeaderTextStatus}
-                    {memberListButton}
-
-                    <HeaderIconWrapper
-                        iconComponent={pinnedIcon}
-                        ariaLabel={true}
-                        buttonClass={pinnedIconClass}
-                        buttonId={'channelHeaderPinButton'}
-                        onClick={this.showPinnedPosts}
-                        tooltipKey={'pinnedPosts'}
-                    />
-                    {this.props.isFileAttachmentsEnabled &&
-                        <HeaderIconWrapper
-                            iconComponent={channelFilesIcon}
-                            ariaLabel={true}
-                            buttonClass={channelFilesIconClass}
-                            buttonId={'channelHeaderFilesButton'}
-                            onClick={this.showChannelFiles}
-                            tooltipKey={'channelFiles'}
-                        />
-                    }
                     {hasGuestsText}
                     {editMessage}
                 </div>
@@ -607,7 +560,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
                     <button
                         id='toggleMute'
                         onClick={this.unmute}
-                        className={'style--none color--link channel-header__mute inactive'}
+                        className={'channel-header__mute inactive btn btn-icon btn-xs'}
                         aria-label={formatMessage({id: 'generic_icons.muted', defaultMessage: 'Muted Icon'})}
                     >
                         <i className={'icon icon-bell-off-outline'}/>
@@ -635,15 +588,36 @@ class ChannelHeader extends React.PureComponent<Props, State> {
                             <div
                                 className='channel-header__title dropdown'
                             >
-                                <div>
-                                    <ChannelHeaderTitle
-                                        dmUser={dmUser}
-                                        gmMembers={gmMembers}
+                                <ChannelHeaderTitle
+                                    dmUser={dmUser}
+                                    gmMembers={gmMembers}
+                                />
+                                <div
+                                    className='channel-header__icons'
+                                >
+                                    {muteTrigger}
+                                    {memberListButton}
+                                    <HeaderIconWrapper
+                                        iconComponent={pinnedIcon}
+                                        ariaLabel={true}
+                                        buttonClass={pinnedIconClass}
+                                        buttonId={'channelHeaderPinButton'}
+                                        onClick={this.showPinnedPosts}
+                                        tooltipKey={'pinnedPosts'}
                                     />
+                                    {this.props.isFileAttachmentsEnabled &&
+                                        <HeaderIconWrapper
+                                            iconComponent={channelFilesIcon}
+                                            ariaLabel={true}
+                                            buttonClass={channelFilesIconClass}
+                                            buttonId={'channelHeaderFilesButton'}
+                                            onClick={this.showChannelFiles}
+                                            tooltipKey={'channelFiles'}
+                                        />
+                                    }
                                 </div>
-                                {muteTrigger}
+                                {headerTextContainer}
                             </div>
-                            {headerTextContainer}
                         </div>
                     </div>
                     <ChannelHeaderPlug
diff --git a/webapp/channels/src/components/channel_header/channel_header_title.tsx b/webapp/channels/src/components/channel_header/channel_header_title.tsx
index ffbe242ebe..9b3fa832cf 100644
--- a/webapp/channels/src/components/channel_header/channel_header_title.tsx
+++ b/webapp/channels/src/components/channel_header/channel_header_title.tsx
@@ -3,19 +3,24 @@
 
 import classNames from 'classnames';
 import type {ReactNode} from 'react';
-import React, {memo, useState} from 'react';
+import React, {memo, useState, useRef, useEffect} from 'react';
 import {useIntl} from 'react-intl';
 import {useSelector} from 'react-redux';
 
 import type {UserProfile} from '@mattermost/types/users';
 
+import {Client4} from 'mattermost-redux/client';
 import {getCurrentChannel} from 'mattermost-redux/selectors/entities/channels';
 
+import {getIsRhsOpen} from 'selectors/rhs';
+
 import {ChannelHeaderDropdown} from 'components/channel_header_dropdown';
+import ProfilePicture from 'components/profile_picture';
 import SharedChannelIndicator from 'components/shared_channel_indicator';
 import ArchiveIcon from 'components/widgets/icons/archive_icon';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
 import BotTag from 'components/widgets/tag/bot_tag';
+import WithTooltip from 'components/with_tooltip';
 
 import {Constants} from 'utils/constants';
 
@@ -33,13 +38,33 @@ const ChannelHeaderTitle = ({
     gmMembers,
 }: Props) => {
     const [titleMenuOpen, setTitleMenuOpen] = useState(false);
+    const [showTooltip, setShowTooltip] = useState(false);
     const intl = useIntl();
     const channel = useSelector(getCurrentChannel);
 
+    const headerItemRef = useRef<HTMLElement | null>(null);
+    const isRHSOpen = useSelector(getIsRhsOpen);
+
+    useEffect(() => {
+        enableToolTipIfNeeded();
+
+        // Re-check on window resize
+        const handleResize = () => enableToolTipIfNeeded();
+        window.addEventListener('resize', handleResize);
+
+        return () => window.removeEventListener('resize', handleResize);
+    }, [channel, gmMembers, dmUser, isRHSOpen]);
+
     if (!channel) {
         return null;
     }
 
+    const enableToolTipIfNeeded = () => {
+        const element = headerItemRef.current;
+        const isTooltip = element && element.offsetWidth < element.scrollWidth;
+        setShowTooltip(isTooltip as boolean);
+    };
+
     const isDirect = (channel.type === Constants.DM_CHANNEL);
     const isGroup = (channel.type === Constants.GM_CHANNEL);
     const channelIsArchived = channel.delete_at !== 0;
@@ -71,8 +96,13 @@ const ChannelHeaderTitle = ({
         return (
             <div
                 id='channelHeaderDropdownButton'
-                className='channel-header__top channel-header__bot'
+                className='channel-header__bot'
             >
+                <ChannelHeaderTitleFavorite/>
+                <ProfilePicture
+                    src={Client4.getProfilePictureUrl(dmUser.id, dmUser.last_picture_update)}
+                    size='sm'
+                />
                 <strong
                     role='heading'
                     aria-level={2}
@@ -85,33 +115,63 @@ const ChannelHeaderTitle = ({
                     </span>
                 </strong>
                 <BotTag/>
-                <ChannelHeaderTitleFavorite/>
             </div>
         );
     }
+
     return (
-        <React.Fragment>
+        <div className='channel-header__top'>
+            <ChannelHeaderTitleFavorite/>
+            {isDirect && dmUser && ( // Check if it's a DM and dmUser is provided
+                <ProfilePicture
+                    src={Client4.getProfilePictureUrl(dmUser.id, dmUser.last_picture_update)}
+                    size='sm'
+                    status={channel.status}
+                />
+            )}
             <MenuWrapper onToggle={setTitleMenuOpen}>
                 <div
                     id='channelHeaderDropdownButton'
-                    className='channel-header__top'
                 >
                     <button
                         className={classNames('channel-header__trigger style--none', {active: titleMenuOpen})}
                         aria-label={intl.formatMessage({id: 'channel_header.menuAriaLabel', defaultMessage: 'Channel Menu'}).toLowerCase()}
                     >
-                        <strong
-                            role='heading'
-                            aria-level={2}
-                            id='channelHeaderTitle'
-                            className='heading'
-                        >
-                            <span>
-                                {archivedIcon}
-                                {channelTitle}
-                                {sharedIcon}
-                            </span>
-                        </strong>
+                        {showTooltip ? (
+                            <WithTooltip
+                                id='channelHeaderTooltip'
+                                placement='bottom'
+                                title={channelTitle as string}
+                            >
+                                <strong
+                                    role='heading'
+                                    aria-level={2}
+                                    id='channelHeaderTitle'
+                                    className='heading'
+                                    ref={headerItemRef}
+                                >
+                                    <span>
+                                        {archivedIcon}
+                                        {channelTitle}
+                                        {sharedIcon}
+                                    </span>
+                                </strong>
+                            </WithTooltip>
+                        ) : (
+                            <strong
+                                role='heading'
+                                aria-level={2}
+                                id='channelHeaderTitle'
+                                className='heading'
+                                ref={headerItemRef}
+                            >
+                                <span>
+                                    {archivedIcon}
+                                    {channelTitle}
+                                    {sharedIcon}
+                                </span>
+                            </strong>
+                        )}
                         <span
                             id='channelHeaderDropdownIcon'
                             className='icon icon-chevron-down header-dropdown-chevron-icon'
@@ -120,8 +180,7 @@ const ChannelHeaderTitle = ({
                 </div>
                 <ChannelHeaderDropdown/>
             </MenuWrapper>
-            <ChannelHeaderTitleFavorite/>
-        </React.Fragment>
+        </div>
     );
 };
 
diff --git a/webapp/channels/src/components/channel_header/channel_header_title_favorite.tsx b/webapp/channels/src/components/channel_header/channel_header_title_favorite.tsx
index fd35efa929..df7c7f639c 100644
--- a/webapp/channels/src/components/channel_header/channel_header_title_favorite.tsx
+++ b/webapp/channels/src/components/channel_header/channel_header_title_favorite.tsx
@@ -73,7 +73,7 @@ const ChannelHeaderTitleFavorite = () => {
                 id='toggleFavorite'
                 ref={toggleFavoriteRef}
                 onClick={toggleFavoriteCallback}
-                className={classNames('style--none color--link channel-header__favorites', {active: isFavorite, inactive: !isFavorite})}
+                className={classNames('channel-header__favorites btn btn-icon btn-xs', {active: isFavorite, inactive: !isFavorite})}
                 aria-label={ariaLabel}
             >
                 <i className={classNames('icon', {'icon-star': isFavorite, 'icon-star-outline': !isFavorite})}/>
diff --git a/webapp/channels/src/components/drafts/drafts.scss b/webapp/channels/src/components/drafts/drafts.scss
index a7bfff7aad..6b91350752 100644
--- a/webapp/channels/src/components/drafts/drafts.scss
+++ b/webapp/channels/src/components/drafts/drafts.scss
@@ -30,7 +30,7 @@
 
     // 2-column
     grid-template-columns: var(--list);
-    grid-template-rows: 63px 1fr;
+    grid-template-rows: 56px 1fr;
 
     .no-results__wrapper > svg {
         margin-bottom: 20px;
diff --git a/webapp/channels/src/components/search_results/search_results.tsx b/webapp/channels/src/components/search_results/search_results.tsx
index 9cd6ec7d97..250bbd542e 100644
--- a/webapp/channels/src/components/search_results/search_results.tsx
+++ b/webapp/channels/src/components/search_results/search_results.tsx
@@ -342,7 +342,9 @@ const SearchResults: React.FC<Props> = (props: Props): JSX.Element => {
             className='SearchResults sidebar-right__body'
         >
             <SearchResultsHeader>
-                {formattedTitle}
+                <span>
+                    {formattedTitle}
+                </span>
                 {props.channelDisplayName && <div className='sidebar--right__title__channel'>{props.channelDisplayName}</div>}
             </SearchResultsHeader>
             {isMessagesSearch &&
diff --git a/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx b/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx
index 929dfa37db..3f31637902 100644
--- a/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx
+++ b/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx
@@ -40,7 +40,7 @@ const SidebarHeaderContainer = styled(Flex).attrs(() => ({
     justify: 'space-between',
     alignment: 'center',
 }))<SidebarHeaderContainerProps>`
-    height: 52px;
+    height: 55px;
     padding: 0 16px;
     gap: 8px;
 
diff --git a/webapp/channels/src/components/threading/global_threads/global_threads.scss b/webapp/channels/src/components/threading/global_threads/global_threads.scss
index 9ca3a80d57..275e73cadd 100644
--- a/webapp/channels/src/components/threading/global_threads/global_threads.scss
+++ b/webapp/channels/src/components/threading/global_threads/global_threads.scss
@@ -65,7 +65,7 @@
 
     // 2-column
     grid-template-columns: var(--list) var(--pane);
-    grid-template-rows: 63px 1fr;
+    grid-template-rows: 56px 1fr;
 
     // single column
     @media screen and (max-width: 1020px) {
diff --git a/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.scss b/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.scss
index 98e5515ead..55296515d4 100644
--- a/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.scss
+++ b/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.scss
@@ -8,7 +8,7 @@
 
     .Header {
         padding-right: 12px;
-        padding-left: 14px;
+        padding-left: 12px;
         border-bottom: var(--border);
         color: rgba(var(--center-channel-color-rgb), 0.75);
         grid-area: header;
@@ -18,7 +18,7 @@
             display: flex;
             height: 100%;
             justify-content: center;
-            padding: 13px 0;
+            padding: 12px 0;
 
             + .tab-button-wrapper {
                 margin-left: 4px;
diff --git a/webapp/channels/src/components/widgets/header/header.scss b/webapp/channels/src/components/widgets/header/header.scss
index 5b62ef4a1b..37fd6f1df4 100644
--- a/webapp/channels/src/components/widgets/header/header.scss
+++ b/webapp/channels/src/components/widgets/header/header.scss
@@ -3,9 +3,11 @@
 
 .Header {
     display: flex;
+    height: 56px;
     align-items: center;
     justify-content: space-between;
     padding: 0 16px;
+    background-color: var(--center-channel-bg);
 
     h1,
     h2,
@@ -23,12 +25,16 @@
         font-weight: 600;
     }
 
-    > div p {
-        margin: 6px 0 0;
-        color: rgba(var(--center-channel-color-rgb), 0.75);
-        font-size: 12px;
-        font-weight: 400;
-        line-height: 16px;
+    > div {
+        display: flex;
+
+        p {
+            margin: 0 0 0 8px;
+            color: rgba(var(--center-channel-color-rgb), 0.75);
+            font-size: 12px;
+            font-weight: 400;
+            line-height: 16px;
+        }
     }
 
     > .spacer {
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index 2fbc88e8ef..d952fede26 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -3035,7 +3035,7 @@
   "channel_groups": "{channel} Groups",
   "channel_header.addChannelHeader": "Add a channel header",
   "channel_header.channelFiles": "Channel files",
-  "channel_header.channelHasGuests": "This channel has guests",
+  "channel_header.channelHasGuests": "Channel has guests",
   "channel_header.channelMembers": "Members",
   "channel_header.closeChannelInfo": "Close Info",
   "channel_header.convert": "Convert to Private Channel",
diff --git a/webapp/channels/src/sass/components/_buttons.scss b/webapp/channels/src/sass/components/_buttons.scss
index 5a44068b56..4711e4989d 100644
--- a/webapp/channels/src/sass/components/_buttons.scss
+++ b/webapp/channels/src/sass/components/_buttons.scss
@@ -49,6 +49,7 @@ button {
 
     &.btn-icon {
         width: 40px;
+        min-width: 40px;
         padding: 0;
         background-color: transparent;
         color: rgba(var(--center-channel-color-rgb), var(--icon-opacity));
@@ -58,7 +59,6 @@ button {
             color: rgba(var(--center-channel-color-rgb), var(--icon-opacity-hover));
         }
 
-        &:focus,
         &:active {
             background-color: rgba(var(--button-bg-rgb), 0.08);
             color: rgba(var(--button-bg-rgb), 1);
@@ -70,8 +70,11 @@ button {
 
         &.btn-xs {
             width: 24px;
+            min-width: 24px;
             height: 24px;
             padding: 0;
+            font-size: 12px;
+            gap: 4px;
 
             &.btn-compact {
                 width: 20px;
@@ -85,8 +88,11 @@ button {
 
         &.btn-sm {
             width: 32px;
+            min-width: 32px;
             height: 32px;
             padding: 0;
+            font-size: 14px;
+            gap: 4px;
 
             &.btn-compact {
                 width: 28px;
diff --git a/webapp/channels/src/sass/components/_channel-header__icon.scss b/webapp/channels/src/sass/components/_channel-header__icon.scss
index 1d6628c83b..396074b383 100644
--- a/webapp/channels/src/sass/components/_channel-header__icon.scss
+++ b/webapp/channels/src/sass/components/_channel-header__icon.scss
@@ -9,7 +9,7 @@
     padding: 0;
     border: none;
     border-radius: 4px;
-    margin: 16px 0 0 4px;
+    margin: 0 0 0 4px;
     background: transparent;
     color: rgba(var(--center-channel-color-rgb), 0.64);
     cursor: pointer;
@@ -40,6 +40,7 @@
 
     &:active,
     &--active,
+    &--active.btn.btn-icon,
     &--active:hover {
         background: rgba(var(--button-bg-rgb), 0.08);
         color: v(button-bg);
@@ -62,7 +63,6 @@
     }
 
     .icon__text {
-        margin: 0 2px;
         font-weight: 600;
     }
 
@@ -71,7 +71,7 @@
     }
 }
 
-.channel-header__icon--wide {
+.channel-header__info .channel-header__icons .channel-header__icon--wide {
     width: auto;
     min-width: unset;
     padding: 0 6px;
@@ -80,7 +80,7 @@
 .channel-header__icon--left {
     height: unset;
     padding: 4px;
-    margin: 0 4px 0 0;
+    margin: 0;
 
     .icon {
         width: 16px;
diff --git a/webapp/channels/src/sass/components/_popover.scss b/webapp/channels/src/sass/components/_popover.scss
index a1a15779ee..00ef2b0ca2 100644
--- a/webapp/channels/src/sass/components/_popover.scss
+++ b/webapp/channels/src/sass/components/_popover.scss
@@ -1,9 +1,5 @@
 @charset "utf-8";
 
-.app__body .popover.channel-header__popover {
-    box-shadow: none;
-}
-
 .header-popover-text-measurer {
     position: absolute;
     width: auto;
@@ -73,15 +69,17 @@
 
     &.channel-header__popover {
         z-index: 999;
-        margin-left: 8px;
+        min-width: 200px;
+        margin-left: 3px;
+        box-shadow: var(--elevation-4);
         font-size: 12px;
 
         &.chanel-header__popover--lhs_offset {
-            margin-left: 73px;
+            margin-left: 68px;
         }
 
         .popover-content {
-            padding: 2px 3px;
+            padding: 5px 8px 8px 8px;
 
             .markdown__list {
                 margin: 0;
@@ -95,10 +93,25 @@
                     margin-bottom: 0;
                 }
             }
+
+            .file-preview__button {
+                display: inline-block;
+
+                .markdown-inline-img {
+                    margin: 0 2px !important;
+                }
+            }
+
+            .emoticon {
+                min-width: 18px;
+                height: 18px;
+                min-height: 18px;
+                vertical-align: text-top;
+            }
         }
 
         &.bottom {
-            margin-top: -10px;
+            margin-top: -30px;
         }
     }
 
diff --git a/webapp/channels/src/sass/layout/_headers.scss b/webapp/channels/src/sass/layout/_headers.scss
index 08e6552c5f..4709250f20 100644
--- a/webapp/channels/src/sass/layout/_headers.scss
+++ b/webapp/channels/src/sass/layout/_headers.scss
@@ -4,20 +4,25 @@
     position: relative;
     z-index: 15;
     width: 100%;
-    max-height: 63px;
-    flex: 0 0 63px;
+    max-height: 56px;
+    padding: 12px;
     border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
     background: v(center-channel-bg);
     font-size: 14px;
 
+    #channelHeaderDropdownButton {
+        display: flex;
+    }
+
     .channel-header__trigger {
         display: flex;
         min-width: 0;
         height: 24px;
         flex: 1 1 0;
         align-items: center;
-        padding: 4px 4px;
+        padding: 4px 2px 4px 4px;
         border-radius: 4px;
+        margin-right: 2px;
 
         &:hover {
             background: rgba(v(center-channel-color-rgb), 0.08);
@@ -33,9 +38,7 @@
         }
 
         .heading > span {
-            overflow: hidden;
             line-height: 20px;
-            text-overflow: ellipsis;
         }
     }
 
@@ -44,7 +47,7 @@
         margin-left: 0;
     }
 
-    .channel-header__favorites {
+    .btn.channel-header__favorites {
         position: relative;
         z-index: 1;
         height: 24px;
@@ -56,7 +59,7 @@
         i {
             position: relative;
             top: -1px;
-            font-size: 18px;
+            font-size: 18px !important;
             opacity: 0.64;
         }
 
@@ -76,6 +79,7 @@
 
         &.active {
             i {
+                color: var(--button-bg);
                 opacity: 1;
             }
         }
@@ -84,63 +88,26 @@
     .channel-header__mute {
         position: relative;
         z-index: 1;
-        height: 24px;
-        padding: 4px;
-        border-radius: 4px;
-        margin-left: 4px;
-        color: v(center-channel-color);
-        float: left;
-
-        &:hover {
-            background: rgba(v(center-channel-color-rgb), 0.08);
-
-            i {
-                opacity: 0.73;
-            }
-        }
-
-        &.inactive {
-            .icon {
-                color: v(center-channel-color);
-            }
-        }
 
         &.active {
             i {
                 opacity: 1;
             }
         }
-
-        i {
-            position: relative;
-            top: -2px;
-            font-size: 16px;
-            opacity: 0.75;
-        }
-    }
-
-    .channel-header__icon {
-        line-height: 16px;
-
-        .channel-header__members {
-            font-size: 14.4px;
-        }
-
-        .channel-header__pin {
-            font-size: 14.4px;
-        }
     }
 
     .flex-parent {
         display: flex;
-        padding: 0 16px 0 8px;
+        padding: 0;
     }
 
     .flex-child {
+        margin: 0 !important; //to override inline margin added by calls button
+
         &:first-child {
             min-width: 0;
             flex: 1;
-            padding: 0 28px 0 0;
+            padding: 0 24px 0 2px;
         }
 
         .markdown__paragraph-inline {
@@ -214,8 +181,39 @@
         }
     }
 
+    &:hover {
+        .channel-header__info {
+            .channel-header__description {
+                .header-placeholder {
+                    display: flex;
+                }
+
+                //show divider between guests label and placeholder on hover
+                &:has(.header-placeholder) .has-guest-header {
+                    &::after {
+                        height: 20px;
+                        border-left: solid 1px rgba(var(--center-channel-color-rgb), 0.12);
+                        margin-right: 8px;
+                        margin-left: 8px;
+                        content: "";
+                    }
+                }
+
+                &:has(.header-placeholder) .header-status__text {
+                    &::after {
+                        height: 20px;
+                        border-left: solid 1px rgba(var(--center-channel-color-rgb), 0.12);
+                        margin-left: 8px;
+                        content: "";
+                    }
+                }
+            }
+        }
+    }
+
     .heading {
         overflow: hidden;
+        align-self: center;
         margin: 0 0 0 2px;
         color: var(--center-channel-color);
         font-family: Metropolis, sans-serif;
@@ -223,6 +221,7 @@
         font-weight: 600;
         line-height: 16px;
         text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     .caret {
@@ -273,21 +272,57 @@
     line-height: 16px;
 }
 
-.channel-header__top {
+.channel-header__top,
+.channel-header__bot {
     display: flex;
     min-width: 0;
+    max-width: 60%;
     align-items: center;
-    gap: 4px;
-}
+    gap: 2px;
 
-.channel-header__bot {
-    margin-left: 4px;
+    .status-wrapper {
+        padding: 0 2px;
+    }
+
+    .BotTag {
+        margin: 0 8px 0 4px;
+    }
+
+    .GuestTag {
+        position: relative;
+        top: -1px;
+    }
+
+    .MenuWrapper {
+        min-width: 0;
+        flex: 0 auto;
+    }
 }
 
 .channel-header__info {
-    margin-top: 8px;
+    padding: 4px 0;
     white-space: nowrap;
 
+    .status-wrapper {
+        .status {
+            right: -5px;
+            bottom: 0;
+            display: flex;
+            width: 16px;
+            height: 16px;
+            align-items: center;
+            justify-content: center;
+
+            svg {
+                top: 0;
+                left: 0;
+                width: 12px;
+                height: 12px;
+                max-height: initial;
+            }
+        }
+    }
+
     .dropdown-toggle {
         display: flex;
         overflow: hidden;
@@ -301,6 +336,7 @@
 
     .channel-header__title {
         display: flex;
+        height: 24px;
 
         .channel-header__favorites {
             flex: 0 0 auto;
@@ -310,36 +346,33 @@
             opacity: 0.5;
         }
 
-        > div {
-            display: flex;
-            min-width: 0;
-            flex: 0 1 auto;
-        }
-
         > a {
             display: inline-block;
             width: calc(100% - 65px);
             text-decoration: none;
         }
 
-        .MenuWrapper {
-            width: 100%;
-        }
-
         .modal {
             white-space: normal;
         }
     }
 
+    .channel-header__icons {
+        display: flex;
+        margin-right: 8px;
+        gap: 4px;
+    }
+
     .channel-header__description {
         position: relative;
         display: flex;
         overflow: hidden;
-        width: 100%;
-        height: 25px;
+        height: 24px;
+        flex: 1;
         align-items: center;
         margin: 0;
         font-size: 12px;
+        line-height: 24px;
         text-overflow: ellipsis;
 
         span[data-emoticon] {
@@ -364,10 +397,10 @@
         }
 
         .header-placeholder {
-            display: flex;
+            display: none;
             overflow: hidden;
             align-items: center;
-            margin-left: 4px;
+            color: rgba(var(--center-channel-color-rgb), 0.75);
             line-height: 16px;
 
             span {
@@ -380,14 +413,32 @@
             }
         }
 
+        //show guests divider if description is set
+        &:has(.header-description__text){
+            .has-guest-header {
+                &::after {
+                    height: 20px;
+                    border-left: solid 1px rgba(var(--center-channel-color-rgb), 0.12);
+                    margin-right: 8px;
+                    margin-left: 8px;
+                    content: "";
+                }
+            }
+
+            .header-status__text {
+                &::after {
+                    height: 20px;
+                    border-left: solid 1px rgba(var(--center-channel-color-rgb), 0.12);
+                    margin-left: 8px;
+                    content: "";
+                }
+            }
+        }
+
         .header-description__text {
-            display: flex;
             overflow: hidden;
-            flex-direction: column;
-            align-self: start;
-            margin-top: 4px;
-            margin-left: 4px;
-            line-height: 19px;
+            height: 24px;
+            line-height: inherit;
 
             ul {
                 &:first-child {
@@ -424,42 +475,11 @@
             margin: 1px 0 0;
         }
 
-        &.light {
-            overflow: visible;
-            color: inherit;
-            opacity: 1;
-
-            button {
-                color: rgba(var(--center-channel-color-rgb), 0.75);
-
-                i {
-                    color: rgba(var(--center-channel-color-rgb), var(--icon-opacity));
-                }
-
-                .edit-icon {
-                    display: none;
-                }
-
-                &:focus,
-                &:hover {
-                    color: rgba(var(--center-channel-color-rgb), 0.88);
-                    text-decoration: none;
-
-                    i {
-                        color: rgba(var(--center-channel-color-rgb), var(--icon-opacity-hover));
-                    }
-                }
-
-                &:hover {
-                    .edit-icon {
-                        display: block;
-                    }
-                }
-            }
-        }
-
         .markdown-inline-img {
-            max-height: 45px;
+            display: inline-block;
+            max-height: 18px;
+            margin: 0 2px !important;
+            vertical-align: text-top;
         }
 
         .edit-icon {
@@ -467,18 +487,15 @@
         }
 
         .status {
-            margin-left: 6px;
+            margin-left: 0;
             line-height: 16px;
         }
     }
 
     .has-guest-header {
-        &::after {
-            position: relative;
-            top: 1px;
-            margin: 0 2px 0 5px;
-            content: "\2022";
-        }
+        height: 16px;
+        color: rgba(var(--center-channel-color-rgb), 0.75);
+        line-height: 16px;
     }
 
     .header-status__text {
@@ -486,15 +503,44 @@
         overflow: hidden;
         flex-shrink: 0;
         align-items: center;
-        margin-right: 7px;
+        margin-right: 8px;
         line-height: 16px;
 
+        &:empty {
+            display: none;
+        }
+
         span.last-active__text {
             color: rgba(var(--center-channel-color-rgb), 0.75);
+
+            ~ .custom-emoji__wrapper {
+                margin-left: 8px;
+            }
+
+            @media screen and (max-width: 1024px){
+                display: none;
+
+                ~ .custom-emoji__wrapper {
+                    margin-left: 0px;
+                }
+            }
         }
 
+
+
         .custom-emoji__wrapper {
-            padding-left: 8px;
+            display: flex;
+            align-items: center;
+
+            > span {
+                margin-right: 2px;
+            }
+
+            @media screen and (max-width: 1024px){
+                .custom-emoji__text {
+                    display:none;
+                }
+            }
         }
 
         p {
diff --git a/webapp/channels/src/sass/layout/_sidebar-right.scss b/webapp/channels/src/sass/layout/_sidebar-right.scss
index 82026bb9de..966b1a4ef3 100644
--- a/webapp/channels/src/sass/layout/_sidebar-right.scss
+++ b/webapp/channels/src/sass/layout/_sidebar-right.scss
@@ -136,12 +136,14 @@
 
     .sidebar--right__title {
         display: flex;
-        height: 2.4rem;
+        height: auto;
         flex: 1 1 auto;
+        align-items: center;
         padding: 0 1.6rem;
         font-family: Metropolis, sans-serif;
         font-size: 1.6rem;
         font-weight: 600;
+        line-height: 1;
 
         @include clearfix;
     }
@@ -215,6 +217,7 @@
 
         .sidebar--right__back {
             margin-right: 4px !important;
+            margin-left: -8px !important;
         }
 
         .controls {
@@ -307,13 +310,7 @@
         }
 
         .sidebar--right__header {
-            flex-basis: 63px;
-        }
-
-        .sidebar--right__title {
-            height: auto;
-            align-items: center;
-            line-height: 63px;
+            flex-basis: 56px;
         }
 
         // search bar container is now only for mobile