diff --git a/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item.tsx b/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item.tsx index 518b522b98..ac0c1926bd 100644 --- a/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item.tsx +++ b/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 { +type MarketplaceItemState = { + showTooltip: boolean; +}; + +export default class MarketplaceItem extends React.PureComponent { + descriptionRef: React.RefObject; + + 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 ); - const description = ( -

- {this.props.error || this.props.description} + const descriptionText = this.props.error || this.props.description; + let description = ( +

+ {descriptionText}

); + if (this.state.showTooltip) { + const displayNameToolTip = ( + + {descriptionText} + + ); + + description = ( + + {description} + + ); + } + let pluginDetails; if (this.props.homepageUrl) { pluginDetails = ( diff --git a/webapp/channels/src/components/plugin_marketplace/marketplace_modal.scss b/webapp/channels/src/components/plugin_marketplace/marketplace_modal.scss index 5a0495c0fc..1fd73cc612 100644 --- a/webapp/channels/src/components/plugin_marketplace/marketplace_modal.scss +++ b/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; + } +}