Merge pull request #1980 from lbryio/title

Add proper html title to card/tile components for long titles

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', {

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>
 );
 

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 />}

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 && (