From 8ee38ee64461c2bea367ac9781550813ade4c87b Mon Sep 17 00:00:00 2001
From: Veronica Dip <dipmveronica@gmail.com>
Date: Mon, 17 Jul 2023 06:39:16 -0300
Subject: [PATCH] MM-53564 : Multi-line channel header preview is narrow on web
 (#24029)

---
 .../channel_header.test.tsx.snap              | 32 -------------------
 .../channel_header/channel_header.tsx         | 11 +------
 2 files changed, 1 insertion(+), 42 deletions(-)

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 876556517dd09..98705ab87d825 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
@@ -191,7 +191,6 @@ exports[`components/ChannelHeader should match snapshot with last active display
           >
             <Overlay
               animation={[Function]}
-              onEnter={[Function]}
               onHide={[Function]}
               placement="bottom"
               rootClose={true}
@@ -206,7 +205,6 @@ exports[`components/ChannelHeader should match snapshot with last active display
                 popoverStyle="info"
                 style={
                   Object {
-                    "maxWidth": "0px",
                     "transform": "translate(0px, 0px)",
                   }
                 }
@@ -497,7 +495,6 @@ exports[`components/ChannelHeader should match snapshot with no last active disp
           >
             <Overlay
               animation={[Function]}
-              onEnter={[Function]}
               onHide={[Function]}
               placement="bottom"
               rootClose={true}
@@ -512,7 +509,6 @@ exports[`components/ChannelHeader should match snapshot with no last active disp
                 popoverStyle="info"
                 style={
                   Object {
-                    "maxWidth": "0px",
                     "transform": "translate(0px, 0px)",
                   }
                 }
@@ -803,7 +799,6 @@ exports[`components/ChannelHeader should render active channel files 1`] = `
           >
             <Overlay
               animation={[Function]}
-              onEnter={[Function]}
               onHide={[Function]}
               placement="bottom"
               rootClose={true}
@@ -818,7 +813,6 @@ exports[`components/ChannelHeader should render active channel files 1`] = `
                 popoverStyle="info"
                 style={
                   Object {
-                    "maxWidth": "0px",
                     "transform": "translate(0px, 0px)",
                   }
                 }
@@ -1107,7 +1101,6 @@ exports[`components/ChannelHeader should render active flagged posts 1`] = `
           >
             <Overlay
               animation={[Function]}
-              onEnter={[Function]}
               onHide={[Function]}
               placement="bottom"
               rootClose={true}
@@ -1122,7 +1115,6 @@ exports[`components/ChannelHeader should render active flagged posts 1`] = `
                 popoverStyle="info"
                 style={
                   Object {
-                    "maxWidth": "0px",
                     "transform": "translate(0px, 0px)",
                   }
                 }
@@ -1411,7 +1403,6 @@ exports[`components/ChannelHeader should render active mentions posts 1`] = `
           >
             <Overlay
               animation={[Function]}
-              onEnter={[Function]}
               onHide={[Function]}
               placement="bottom"
               rootClose={true}
@@ -1426,7 +1417,6 @@ exports[`components/ChannelHeader should render active mentions posts 1`] = `
                 popoverStyle="info"
                 style={
                   Object {
-                    "maxWidth": "0px",
                     "transform": "translate(0px, 0px)",
                   }
                 }
@@ -1715,7 +1705,6 @@ exports[`components/ChannelHeader should render active pinned posts 1`] = `
           >
             <Overlay
               animation={[Function]}
-              onEnter={[Function]}
               onHide={[Function]}
               placement="bottom"
               rootClose={true}
@@ -1730,7 +1719,6 @@ exports[`components/ChannelHeader should render active pinned posts 1`] = `
                 popoverStyle="info"
                 style={
                   Object {
-                    "maxWidth": "0px",
                     "transform": "translate(0px, 0px)",
                   }
                 }
@@ -1988,7 +1976,6 @@ exports[`components/ChannelHeader should render archived view 1`] = `
           >
             <Overlay
               animation={[Function]}
-              onEnter={[Function]}
               onHide={[Function]}
               placement="bottom"
               rootClose={true}
@@ -2003,7 +1990,6 @@ exports[`components/ChannelHeader should render archived view 1`] = `
                 popoverStyle="info"
                 style={
                   Object {
-                    "maxWidth": "0px",
                     "transform": "translate(0px, 0px)",
                   }
                 }
@@ -2324,7 +2310,6 @@ exports[`components/ChannelHeader should render correct menu when muted 1`] = `
           >
             <Overlay
               animation={[Function]}
-              onEnter={[Function]}
               onHide={[Function]}
               placement="bottom"
               rootClose={true}
@@ -2339,7 +2324,6 @@ exports[`components/ChannelHeader should render correct menu when muted 1`] = `
                 popoverStyle="info"
                 style={
                   Object {
-                    "maxWidth": "0px",
                     "transform": "translate(0px, 0px)",
                   }
                 }
@@ -2628,7 +2612,6 @@ exports[`components/ChannelHeader should render not active channel files 1`] = `
           >
             <Overlay
               animation={[Function]}
-              onEnter={[Function]}
               onHide={[Function]}
               placement="bottom"
               rootClose={true}
@@ -2643,7 +2626,6 @@ exports[`components/ChannelHeader should render not active channel files 1`] = `
                 popoverStyle="info"
                 style={
                   Object {
-                    "maxWidth": "0px",
                     "transform": "translate(0px, 0px)",
                   }
                 }
@@ -2952,7 +2934,6 @@ exports[`components/ChannelHeader should render properly when custom status is e
           >
             <Overlay
               animation={[Function]}
-              onEnter={[Function]}
               onHide={[Function]}
               placement="bottom"
               rootClose={true}
@@ -2967,7 +2948,6 @@ exports[`components/ChannelHeader should render properly when custom status is e
                 popoverStyle="info"
                 style={
                   Object {
-                    "maxWidth": "0px",
                     "transform": "translate(0px, 0px)",
                   }
                 }
@@ -3298,7 +3278,6 @@ exports[`components/ChannelHeader should render properly when custom status is s
           >
             <Overlay
               animation={[Function]}
-              onEnter={[Function]}
               onHide={[Function]}
               placement="bottom"
               rootClose={true}
@@ -3313,7 +3292,6 @@ exports[`components/ChannelHeader should render properly when custom status is s
                 popoverStyle="info"
                 style={
                   Object {
-                    "maxWidth": "0px",
                     "transform": "translate(0px, 0px)",
                   }
                 }
@@ -3604,7 +3582,6 @@ exports[`components/ChannelHeader should render properly when empty 1`] = `
           >
             <Overlay
               animation={[Function]}
-              onEnter={[Function]}
               onHide={[Function]}
               placement="bottom"
               rootClose={true}
@@ -3619,7 +3596,6 @@ exports[`components/ChannelHeader should render properly when empty 1`] = `
                 popoverStyle="info"
                 style={
                   Object {
-                    "maxWidth": "0px",
                     "transform": "translate(0px, 0px)",
                   }
                 }
@@ -3908,7 +3884,6 @@ exports[`components/ChannelHeader should render properly when populated 1`] = `
           >
             <Overlay
               animation={[Function]}
-              onEnter={[Function]}
               onHide={[Function]}
               placement="bottom"
               rootClose={true}
@@ -3923,7 +3898,6 @@ exports[`components/ChannelHeader should render properly when populated 1`] = `
                 popoverStyle="info"
                 style={
                   Object {
-                    "maxWidth": "0px",
                     "transform": "translate(0px, 0px)",
                   }
                 }
@@ -4216,7 +4190,6 @@ exports[`components/ChannelHeader should render properly when populated with cha
           >
             <Overlay
               animation={[Function]}
-              onEnter={[Function]}
               onHide={[Function]}
               placement="bottom"
               rootClose={true}
@@ -4231,7 +4204,6 @@ exports[`components/ChannelHeader should render properly when populated with cha
                 popoverStyle="info"
                 style={
                   Object {
-                    "maxWidth": "0px",
                     "transform": "translate(0px, 0px)",
                   }
                 }
@@ -4547,7 +4519,6 @@ exports[`components/ChannelHeader should render shared view 1`] = `
           >
             <Overlay
               animation={[Function]}
-              onEnter={[Function]}
               onHide={[Function]}
               placement="bottom"
               rootClose={true}
@@ -4562,7 +4533,6 @@ exports[`components/ChannelHeader should render shared view 1`] = `
                 popoverStyle="info"
                 style={
                   Object {
-                    "maxWidth": "0px",
                     "transform": "translate(0px, 0px)",
                   }
                 }
@@ -4861,7 +4831,6 @@ exports[`components/ChannelHeader should render the pinned icon with the pinned
           >
             <Overlay
               animation={[Function]}
-              onEnter={[Function]}
               onHide={[Function]}
               placement="bottom"
               rootClose={true}
@@ -4876,7 +4845,6 @@ exports[`components/ChannelHeader should render the pinned icon with the pinned
                 popoverStyle="info"
                 style={
                   Object {
-                    "maxWidth": "0px",
                     "transform": "translate(0px, 0px)",
                   }
                 }
diff --git a/webapp/channels/src/components/channel_header/channel_header.tsx b/webapp/channels/src/components/channel_header/channel_header.tsx
index d60a6343eaa2d..11582e64cb974 100644
--- a/webapp/channels/src/components/channel_header/channel_header.tsx
+++ b/webapp/channels/src/components/channel_header/channel_header.tsx
@@ -103,7 +103,6 @@ type State = {
     showChannelHeaderPopover: boolean;
     leftOffset: number;
     topOffset: number;
-    popoverOverlayWidth: number;
 };
 
 class ChannelHeader extends React.PureComponent<Props, State> {
@@ -122,7 +121,6 @@ class ChannelHeader extends React.PureComponent<Props, State> {
         this.headerOverlayRef = React.createRef();
 
         this.state = {
-            popoverOverlayWidth: 0,
             showChannelHeaderPopover: false,
             leftOffset: 0,
             topOffset: 0,
@@ -246,12 +244,6 @@ class ChannelHeader extends React.PureComponent<Props, State> {
         }
     };
 
-    setPopoverOverlayWidth = () => {
-        const headerDescriptionRect = this.headerDescriptionRef.current?.getBoundingClientRect();
-        const ellipsisWidthAdjustment = 10;
-        this.setState({popoverOverlayWidth: (headerDescriptionRect?.width ?? 0) + ellipsisWidthAdjustment});
-    };
-
     handleFormattedTextClick = (e: MouseEvent<HTMLSpanElement>) => handleFormattedTextClick(e, this.props.currentRelativeTeamUrl);
 
     renderCustomStatus = () => {
@@ -536,7 +528,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
                     id='header-popover'
                     popoverStyle='info'
                     popoverSize='lg'
-                    style={{maxWidth: `${this.state.popoverOverlayWidth}px`, transform: `translate(${this.state.leftOffset}px, ${this.state.topOffset}px)`}}
+                    style={{transform: `translate(${this.state.leftOffset}px, ${this.state.topOffset}px)`}}
                     placement='bottom'
                     className={classNames('channel-header__popover', {'chanel-header__popover--lhs_offset': this.props.hasMoreThanOneTeam})}
                 >
@@ -604,7 +596,6 @@ class ChannelHeader extends React.PureComponent<Props, State> {
                             rootClose={true}
                             target={this.headerDescriptionRef.current as React.ReactInstance}
                             ref={this.headerOverlayRef}
-                            onEnter={this.setPopoverOverlayWidth}
                             onHide={() => this.setState({showChannelHeaderPopover: false})}
                         >
                             {popoverContent}