diff --git a/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/__snapshots__/sidebar_channel_link.test.tsx.snap b/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/__snapshots__/sidebar_channel_link.test.tsx.snap
index 24903768e6..7a7a14821a 100644
--- a/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/__snapshots__/sidebar_channel_link.test.tsx.snap
+++ b/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/__snapshots__/sidebar_channel_link.test.tsx.snap
@@ -199,15 +199,11 @@ exports[`components/sidebar/sidebar_channel/sidebar_channel_link should match sn
         ]
       }
     >
-      <div
-        className="truncated"
+      <span
+        className="SidebarChannelLinkLabel"
       >
-        <span
-          className="SidebarChannelLinkLabel"
-        >
-          channel_label
-        </span>
-      </div>
+        channel_label
+      </span>
     </OverlayTrigger>
     <Connect(Pluggable)
       channel={
diff --git a/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/sidebar_channel_link.tsx b/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/sidebar_channel_link.tsx
index e5e71adc50..5f88ef67c6 100644
--- a/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/sidebar_channel_link.tsx
+++ b/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/sidebar_channel_link.tsx
@@ -80,13 +80,11 @@ type State = {
 
 export default class SidebarChannelLink extends React.PureComponent<Props, State> {
     labelRef: React.RefObject<HTMLDivElement>;
-    gmItemRef: React.RefObject<HTMLDivElement>;
 
     constructor(props: Props) {
         super(props);
 
         this.labelRef = React.createRef();
-        this.gmItemRef = React.createRef();
 
         this.state = {
             isMenuOpen: false,
@@ -105,7 +103,7 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
     }
 
     enableToolTipIfNeeded = (): void => {
-        const element = this.gmItemRef.current || this.labelRef.current;
+        const element = this.labelRef.current;
         const showTooltip = element && element.offsetWidth < element.scrollWidth;
         this.setState({showTooltip: Boolean(showTooltip)});
     };
@@ -133,7 +131,7 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
     };
 
     // Bootstrap adds the attr dynamically, removing it to prevent a11y readout
-    removeTooltipLink = (): void => this.gmItemRef.current?.removeAttribute?.('aria-describedby');
+    removeTooltipLink = (): void => this.labelRef.current?.removeAttribute?.('aria-describedby');
 
     handleChannelClick = (event: React.MouseEvent<HTMLAnchorElement>): void => {
         mark(Mark.ChannelLinkClicked);
@@ -195,7 +193,10 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
         }
 
         let labelElement: JSX.Element = (
-            <span className='SidebarChannelLinkLabel'>
+            <span
+                ref={this.labelRef}
+                className='SidebarChannelLinkLabel'
+            >
                 {wrapEmojis(label)}
             </span>
         );
@@ -212,12 +213,7 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
                     overlay={displayNameToolTip}
                     onEntering={this.removeTooltipLink}
                 >
-                    <div
-                        className='truncated'
-                        ref={this.gmItemRef}
-                    >
-                        {labelElement}
-                    </div>
+                    {labelElement}
                 </OverlayTrigger>
             );
         }
@@ -231,7 +227,6 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
                 }}
                 emojiStyle={{
                     marginTop: -4,
-                    marginLeft: 6,
                     marginBottom: 0,
                     opacity: 0.8,
                 }}
@@ -246,7 +241,6 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
                 />
                 <div
                     className='SidebarChannelLinkLabel_wrapper'
-                    ref={this.labelRef}
                 >
                     {labelElement}
                     {customStatus}
diff --git a/webapp/channels/src/sass/layout/_sidebar-left.scss b/webapp/channels/src/sass/layout/_sidebar-left.scss
index 12da7d9ba1..95835c4b34 100644
--- a/webapp/channels/src/sass/layout/_sidebar-left.scss
+++ b/webapp/channels/src/sass/layout/_sidebar-left.scss
@@ -1132,10 +1132,12 @@ $sidebarOpacityAnimationDuration: 0.15s;
         }
 
         & span.SidebarChannelLinkLabel {
+            overflow: hidden;
             max-width: 100%;
             height: 18px;
             line-height: 18px;
             text-align: justify;
+            text-overflow: ellipsis;
             user-select: none;
             white-space: nowrap;
         }
@@ -1298,13 +1300,7 @@ $sidebarOpacityAnimationDuration: 0.15s;
         display: flex;
         overflow: hidden;
         flex-grow: 1;
-    }
-
-    .SidebarChannelLinkLabel_wrapper > div.truncated {
-        display: block;
-        overflow: hidden;
-        width: 100%;
-        text-overflow: ellipsis;
+        gap: 8px;
     }
 
     .DirectChannel__profile-picture {