Fixed: (UI) Improve displaying long album titles

frontend/src/Album/Details/AlbumDetails.js

@@ -35,7 +35,7 @@ import AlbumDetailsLinks from './AlbumDetailsLinks';
 import AlbumDetailsMediumConnector from './AlbumDetailsMediumConnector';
 import styles from './AlbumDetails.css';
 
-const defaultFontSize = parseInt(fonts.defaultFontSize);
+const intermediateFontSize = parseInt(fonts.intermediateFontSize);
 const lineHeight = parseFloat(fonts.lineHeight);
 
 function getFanartUrl(images) {
@@ -358,8 +358,14 @@ class AlbumDetails extends Component {
                       />
                     </div>
 
-                    <div className={styles.title}>
-                      {title}{disambiguation ? ` (${disambiguation})` : ''}
+                    <div
+                      className={styles.title}
+                      title={disambiguation ? `${title} (${disambiguation})` : title}
+                    >
+                      <TextTruncate
+                        line={2}
+                        text={disambiguation ? `${title} (${disambiguation})` : title}
+                      />
                     </div>
                   </div>
 
@@ -512,9 +518,9 @@ class AlbumDetails extends Component {
                   />
 
                 </div>
-                <div className={styles.overview}>
+                <div className={styles.overview} title={overview}>
                   <TextTruncate
-                    line={Math.floor(125 / (defaultFontSize * lineHeight))}
+                    line={Math.floor(125 / (intermediateFontSize * lineHeight))}
                     text={overview}
                   />
                 </div>

frontend/src/Artist/Details/AlbumRow.css

@@ -1,7 +1,7 @@
 .title {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
-  white-space: nowrap;
+  word-break: break-word;
 }
 
 .monitored {

package.json

@@ -75,7 +75,7 @@
     "react-router-dom": "5.2.0",
     "react-slider": "1.1.4",
     "react-tabs": "3.2.2",
-    "react-text-truncate": "0.18.0",
+    "react-text-truncate": "0.19.0",
     "react-virtualized": "9.21.1",
     "redux": "4.1.0",
     "redux-actions": "2.6.5",

yarn.lock

@@ -5330,10 +5330,10 @@ react-tabs@3.2.2:
     clsx "^1.1.0"
     prop-types "^15.5.0"
 
-react-text-truncate@0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/react-text-truncate/-/react-text-truncate-0.18.0.tgz#c65f4be660d24734badb903a4832467eddcf8058"
-  integrity sha512-0cc07CRPRPm3cTloVbPicVTSosJNauwVcmJb5FPa71u4KtDVgrRPJoxVvLBubl3gLyx1pVUozgREYMHpHM16jg==
+react-text-truncate@0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/react-text-truncate/-/react-text-truncate-0.19.0.tgz#60bc5ecf29a03ebc256f31f90a2d8402176aac91"
+  integrity sha512-QxHpZABfGG0Z3WEYbRTZ+rXdZn50Zvp+sWZXgVAd7FCKAMzv/kcwctTpNmWgXDTpAoHhMjOVwmgRtX3x5yeF4w==
   dependencies:
     prop-types "^15.5.7"