From ddea4eaff93bef53d247c455f7bb4511b25f03e0 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Thu, 13 Jul 2023 04:05:28 +0300
Subject: [PATCH] Fixed: (UI) Improve displaying long album titles

---
 frontend/src/Album/Details/AlbumDetails.js | 16 +++++++++++-----
 frontend/src/Artist/Details/AlbumRow.css   |  2 +-
 package.json                               |  2 +-
 yarn.lock                                  |  8 ++++----
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/frontend/src/Album/Details/AlbumDetails.js b/frontend/src/Album/Details/AlbumDetails.js
index 60f9e23a9..0a6c883a4 100644
--- a/frontend/src/Album/Details/AlbumDetails.js
+++ b/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>
diff --git a/frontend/src/Artist/Details/AlbumRow.css b/frontend/src/Artist/Details/AlbumRow.css
index e29f491d7..836fec7ac 100644
--- a/frontend/src/Artist/Details/AlbumRow.css
+++ b/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 {
diff --git a/package.json b/package.json
index d93275c45..5dd46a82f 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 36d3c0e2c..8bd670c24 100644
--- a/yarn.lock
+++ b/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"