UI Cleanup, Artist Overview Truncate

frontend/src/AddArtist/AddNewArtist/AddNewArtistModalContent.css

@@ -19,6 +19,8 @@
 
 .overview {
   margin-bottom: 30px;
+  max-height: 230px;
+  text-align: justify;
 }
 
 .labelIcon {

frontend/src/AddArtist/AddNewArtist/AddNewArtistModalContent.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import TextTruncate from 'react-text-truncate';
 import { icons, kinds, inputTypes, tooltipPositions } from 'Helpers/Props';
 import Icon from 'Components/Icon';
 import SpinnerButton from 'Components/Link/SpinnerButton';
@@ -93,7 +94,11 @@ class AddNewArtistModalContent extends Component {
 
             <div className={styles.info}>
               <div className={styles.overview}>
-                {overview}
+                <TextTruncate
+                  truncateText="…"
+                  line={8}
+                  text={overview}
+                />
               </div>
 
               <Form>

frontend/src/AddArtist/AddNewArtist/AddNewArtistSearchResult.css

@@ -36,5 +36,7 @@
 }
 
 .overview {
+  overflow: hidden;
   margin-top: 20px;
+  text-align: justify;
 }

frontend/src/AddArtist/AddNewArtist/AddNewArtistSearchResult.js

@@ -1,5 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import TextTruncate from 'react-text-truncate';
+import dimensions from 'Styles/Variables/dimensions';
+import fonts from 'Styles/Variables/fonts';
 import { icons, kinds, sizes } from 'Helpers/Props';
 import HeartRating from 'Components/HeartRating';
 import Icon from 'Components/Icon';
@@ -9,6 +12,23 @@ import ArtistPoster from 'Artist/ArtistPoster';
 import AddNewArtistModal from './AddNewArtistModal';
 import styles from './AddNewArtistSearchResult.css';
 
+const columnPadding = parseInt(dimensions.artistIndexColumnPadding);
+const columnPaddingSmallScreen = parseInt(dimensions.artistIndexColumnPaddingSmallScreen);
+const defaultFontSize = parseInt(fonts.defaultFontSize);
+const lineHeight = parseFloat(fonts.lineHeight);
+
+function calculateHeight(rowHeight, isSmallScreen) {
+  let height = rowHeight - 45;
+
+  if (isSmallScreen) {
+    height -= columnPaddingSmallScreen;
+  } else {
+    height -= columnPadding;
+  }
+
+  return height;
+}
+
 class AddNewArtistSearchResult extends Component {
 
   //
@@ -66,6 +86,8 @@ class AddNewArtistSearchResult extends Component {
       albums = `${albumCount} Albums`;
     }
 
+    const height = calculateHeight(230, isSmallScreen);
+
     return (
       <Link
         className={styles.searchResult}
@@ -138,8 +160,19 @@ class AddNewArtistSearchResult extends Component {
             }
           </div>
 
-          <div className={styles.overview}>
-            {overview}
+          <div>
+            <div
+              className={styles.overview}
+              style={{
+                maxHeight: `${height}px`
+              }}
+            >
+              <TextTruncate
+                truncateText="…"
+                line={Math.floor(height / (defaultFontSize * lineHeight))}
+                text={overview}
+              />
+            </div>
           </div>
         </div>