diff --git a/src/renderer/component/channelTile/view.jsx b/src/renderer/component/channelTile/view.jsx index 4b3c0f744..304bdd663 100644 --- a/src/renderer/component/channelTile/view.jsx +++ b/src/renderer/component/channelTile/view.jsx @@ -79,7 +79,7 @@ class ChannelTile extends React.PureComponent<Props> { 'card__title--large': size === 'large', })} > - <TruncatedText lines={1}>{channelName || uri}</TruncatedText> + <TruncatedText text={channelName || uri} lines={1} /> </div> <div className={classnames('card__subtitle', { diff --git a/src/renderer/component/common/truncated-text.jsx b/src/renderer/component/common/truncated-text.jsx index 8736ae530..065ec5452 100644 --- a/src/renderer/component/common/truncated-text.jsx +++ b/src/renderer/component/common/truncated-text.jsx @@ -2,13 +2,13 @@ import * as React from 'react'; type Props = { - lines: ?number, - children: React.Node, + text: string, + lines: number, }; const TruncatedText = (props: Props) => ( - <span className="truncated-text" style={{ WebkitLineClamp: props.lines }}> - {props.children} + <span title={props.text} className="truncated-text" style={{ WebkitLineClamp: props.lines }}> + {props.text} </span> ); diff --git a/src/renderer/component/fileCard/view.jsx b/src/renderer/component/fileCard/view.jsx index f061d0b29..1ca015b89 100644 --- a/src/renderer/component/fileCard/view.jsx +++ b/src/renderer/component/fileCard/view.jsx @@ -93,7 +93,7 @@ class FileCard extends React.PureComponent<Props> { <CardMedia thumbnail={thumbnail} /> <div className="card__title-identity"> <div className="card__title--small card__title--file-card"> - <TruncatedText lines={2}>{title}</TruncatedText> + <TruncatedText text={title} lines={2} /> </div> <div className="card__subtitle"> {pending ? <div>Pending...</div> : <UriIndicator uri={uri} link />} diff --git a/src/renderer/component/fileTile/view.jsx b/src/renderer/component/fileTile/view.jsx index 100d90f55..bfc650d71 100644 --- a/src/renderer/component/fileTile/view.jsx +++ b/src/renderer/component/fileTile/view.jsx @@ -127,7 +127,7 @@ class FileTile extends React.PureComponent<Props> { 'card__title--large': size === 'large', })} > - <TruncatedText lines={size === 'small' ? 2 : 3}>{title || name}</TruncatedText> + <TruncatedText text={title || name} lines={size === 'small' ? 2 : 3} /> </div> <div className={classnames('card__subtitle', { @@ -151,7 +151,7 @@ class FileTile extends React.PureComponent<Props> { 'card__subtext--large': size === 'large', })} > - <TruncatedText lines={size === 'large' ? 4 : 3}>{description}</TruncatedText> + <TruncatedText text={description} lines={size === 'large' ? 4 : 3} /> </div> )} {!name && (