Fix issue with the table stretching on the Movie > Details > Search when the Title is extremely long

frontend/src/Components/Link/Link.js

@@ -32,6 +32,7 @@ class Link extends Component {
       isDisabled,
       noRouter,
       onPress,
+      title,
       ...otherProps
     } = this.props;
 
@@ -39,6 +40,10 @@ class Link extends Component {
     let el = component;
 
     if (to) {
+      if (title) {
+        linkProps.title = title;
+      }
+
       if ((/\w+?:\/\//).test(to)) {
         el = 'a';
         linkProps.href = to;
@@ -87,6 +92,7 @@ Link.propTypes = {
   className: PropTypes.string,
   component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   to: PropTypes.string,
+  title: PropTypes.string,
   target: PropTypes.string,
   isDisabled: PropTypes.bool,
   noRouter: PropTypes.bool,

frontend/src/InteractiveSearch/InteractiveSearchRow.css

@@ -1,11 +1,15 @@
-.protocol {
+.cell {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
+}
+
+.protocol {
+  composes: cell;
 
   width: 80px;
 }
 
 .indexer {
-  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+  composes: cell;
 
   width: 85px;
 }
@@ -13,7 +17,7 @@
 .quality,
 .customFormat,
 .language {
-  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+  composes: cell;
 }
 
 .language {
@@ -21,7 +25,7 @@
 }
 
 .customFormatScore {
-  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+  composes: cell;
 
   width: 55px;
   font-weight: bold;
@@ -31,20 +35,30 @@
 .rejected,
 .indexerFlags,
 .download {
-  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+  composes: cell;
 
   width: 50px;
 }
 
 .age,
 .size {
-  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+  composes: cell;
 
   white-space: nowrap;
 }
 
 .peers {
-  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+  composes: cell;
 
   width: 75px;
 }
+
+.title {
+  composes: cell;
+
+  max-width: 30vw;
+}
+
+.title div {
+  @add-mixin truncate;
+}

frontend/src/InteractiveSearch/InteractiveSearchRow.js

@@ -142,8 +142,13 @@ class InteractiveSearchRow extends Component {
         </TableRowCell>
 
         <TableRowCell className={styles.title}>
-          <Link to={infoUrl}>
+          <Link
-            {title}
+            to={infoUrl}
+            title={title}
+          >
+            <div>
+              {title}
+            </div>
           </Link>
         </TableRowCell>