MM-52161_The Marketplace modal has some display issues (#23011)

webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item.tsx

@@ -75,7 +75,33 @@ export type MarketplaceItemProps = {
     versionLabel: JSX.Element| null;
 };
 
-export default class MarketplaceItem extends React.PureComponent <MarketplaceItemProps> {
+type MarketplaceItemState = {
+    showTooltip: boolean;
+};
+
+export default class MarketplaceItem extends React.PureComponent <MarketplaceItemProps, MarketplaceItemState> {
+    descriptionRef: React.RefObject<HTMLParagraphElement>;
+
+    constructor(props: MarketplaceItemProps) {
+        super(props);
+
+        this.descriptionRef = React.createRef();
+
+        this.state = {
+            showTooltip: false,
+        };
+    }
+
+    componentDidMount(): void {
+        this.enableToolTipIfNeeded();
+    }
+
+    enableToolTipIfNeeded = (): void => {
+        const element = this.descriptionRef.current;
+        const showTooltip = element && element.offsetWidth < element.scrollWidth;
+        this.setState({showTooltip: Boolean(showTooltip)});
+    };
+
     render(): JSX.Element {
         const {labels = null} = this.props;
         let icon;
@@ -105,12 +131,37 @@ export default class MarketplaceItem extends React.PureComponent <MarketplaceIte
             </>
         );
 
-        const description = (
+        const descriptionText = this.props.error || this.props.description;
-            <p className={classNames('more-modal__description', {error_text: this.props.error})}>
+        let description = (
-                {this.props.error || this.props.description}
+            <p
+                className={classNames('more-modal__description', {error_text: this.props.error})}
+                ref={this.descriptionRef}
+            >
+                {descriptionText}
             </p>
         );
 
+        if (this.state.showTooltip) {
+            const displayNameToolTip = (
+                <Tooltip
+                    id='marketplace-item-description__tooltip'
+                    className='more-modal__description-tooltip'
+                >
+                    {descriptionText}
+                </Tooltip>
+            );
+
+            description = (
+                <OverlayTrigger
+                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                    placement='top'
+                    overlay={displayNameToolTip}
+                >
+                    {description}
+                </OverlayTrigger>
+            );
+        }
+
         let pluginDetails;
         if (this.props.homepageUrl) {
             pluginDetails = (

webapp/channels/src/components/plugin_marketplace/marketplace_modal.scss

@@ -90,6 +90,7 @@
         overflow-y: scroll;
 
         .more-modal__row {
+            overflow: hidden;
             min-height: 80px;
             padding: 16px 20px;
             border-bottom: none;
@@ -99,10 +100,11 @@
             }
 
             .update {
-                padding: 10px 10px 0 0;
-                border-top: 1px solid rgba(black, 0.1);
-                margin: 10px 10px 0 0;
                 font-size: 0.9em;
+
+                a {
+                    text-decoration: none;
+                }
             }
 
             .more-modal__details {
@@ -117,7 +119,7 @@
 
                 .more-modal__description {
                     margin: 2px 0 0;
-                    color: rgba(var(--center-channel-color-rgb), 0.64);
+                    color: var(--center-channel-color-rgb);
                     font-size: 14px;
                     font-weight: 400;
                     line-height: 20px;
@@ -275,3 +277,9 @@
         height: 390px;
     }
 }
+
+.more-modal__description-tooltip {
+    .tooltip-inner {
+        text-align: left;
+    }
+}