[MM-53491] Fix rendering of active call icon in sidebar's channel link (#27172)

Automatic Merge

webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/__snapshots__/sidebar_channel_link.test.tsx.snap

@@ -198,16 +198,12 @@ exports[`components/sidebar/sidebar_channel/sidebar_channel_link should match sn
           "focus",
         ]
       }
-    >
-      <div
-        className="truncated"
     >
       <span
         className="SidebarChannelLinkLabel"
       >
         channel_label
       </span>
-      </div>
     </OverlayTrigger>
     <Connect(Pluggable)
       channel={

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>
         );
@@ -211,13 +212,8 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
                     placement='top'
                     overlay={displayNameToolTip}
                     onEntering={this.removeTooltipLink}
-                >
-                    <div
-                        className='truncated'
-                        ref={this.gmItemRef}
                 >
                     {labelElement}
-                    </div>
                 </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}

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;
-    }
+        gap: 8px;
-
-    .SidebarChannelLinkLabel_wrapper > div.truncated {
-        display: block;
-        overflow: hidden;
-        width: 100%;
-        text-overflow: ellipsis;
     }
 
     .DirectChannel__profile-picture {