MM-56324 Channel Header UI Update (#26383)

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;

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,17 +588,38 @@ class ChannelHeader extends React.PureComponent<Props, State> {
                             <div
                                 className='channel-header__title dropdown'
                             >
-                                <div>
                                 <ChannelHeaderTitle
                                     dmUser={dmUser}
                                     gmMembers={gmMembers}
                                 />
-                                </div>
+                                <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>
                                 {headerTextContainer}
                             </div>
                         </div>
+                    </div>
                     <ChannelHeaderPlug
                         channel={channel}
                         channelMember={channelMember}

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,26 +115,40 @@ 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()}
+                    >
+                        {showTooltip ? (
+                            <WithTooltip
+                                id='channelHeaderTooltip'
+                                placement='bottom'
+                                title={channelTitle as string}
                             >
                                 <strong
                                     role='heading'
                                     aria-level={2}
                                     id='channelHeaderTitle'
                                     className='heading'
+                                    ref={headerItemRef}
                                 >
                                     <span>
                                         {archivedIcon}
@@ -112,6 +156,22 @@ const ChannelHeaderTitle = ({
                                         {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/>
+        </div>
-        </React.Fragment>
     );
 };
 

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})}/>

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;

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>
+                <span>
                     {formattedTitle}
+                </span>
                 {props.channelDisplayName && <div className='sidebar--right__title__channel'>{props.channelDisplayName}</div>}
             </SearchResultsHeader>
             {isMessagesSearch &&

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;
 

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) {

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;

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,13 +25,17 @@
         font-weight: 600;
     }
 
-    > div p {
+    > div {
-        margin: 6px 0 0;
+        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 {
         flex: 1;

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",

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;

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;

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;
         }
     }
 

webapp/channels/src/sass/layout/_headers.scss

@@ -4,20 +4,25 @@
     position: relative;
     z-index: 15;
     width: 100%;
-    max-height: 63px;
+    max-height: 56px;
-    flex: 0 0 63px;
+    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;
+
+    .status-wrapper {
+        padding: 0 2px;
     }
 
-.channel-header__bot {
+    .BotTag {
-    margin-left: 4px;
+        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: 24px;
-        height: 25px;
+        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;
+            height: 24px;
-            align-self: start;
+            line-height: inherit;
-            margin-top: 4px;
-            margin-left: 4px;
-            line-height: 19px;
 
             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 {
+        height: 16px;
-            position: relative;
+        color: rgba(var(--center-channel-color-rgb), 0.75);
-            top: 1px;
+        line-height: 16px;
-            margin: 0 2px 0 5px;
-            content: "\2022";
-        }
     }
 
     .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 {

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;
+            flex-basis: 56px;
-        }
-
-        .sidebar--right__title {
-            height: auto;
-            align-items: center;
-            line-height: 63px;
         }
 
         // search bar container is now only for mobile