Fixed: Scroll long overviews for artists and albums

frontend/src/Album/Details/AlbumDetails.css

@@ -5,7 +5,6 @@
 .header {
   position: relative;
   width: 100%;
-  height: 310px;
 }
 
 .backdrop {
@@ -30,20 +29,18 @@
   width: 100%;
   height: 100%;
   color: var(--white);
+  gap: 35px;
 }
 
 .cover {
   flex-shrink: 0;
-  margin-right: 35px;
   width: 250px;
   height: 250px;
 }
 
 .info {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
   overflow: hidden;
+  width: 100%;
 }
 
 .titleRow {
@@ -59,6 +56,8 @@
 }
 
 .title {
+  overflow: hidden;
+  max-height: calc(2 * 50px);
   font-weight: 300;
   font-size: 50px;
   line-height: 50px;
@@ -133,8 +132,12 @@
 
 .overview {
   flex: 1 0 auto;
+  overflow-x: auto;
   margin-top: 8px;
   min-height: 0;
+  max-height: 150px;
+  text-wrap: balance;
+  white-space: pre-wrap;
   font-size: $intermediateFontSize;
 }
 
@@ -152,6 +155,7 @@
   }
 
   .title {
+    max-height: calc(3 * 30px);
     font-weight: 300;
     font-size: 30px;
     line-height: 30px;

frontend/src/Album/Details/AlbumDetails.js

@@ -26,7 +26,6 @@ import Tooltip from 'Components/Tooltip/Tooltip';
 import { align, icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
 import OrganizePreviewModalConnector from 'Organize/OrganizePreviewModalConnector';
 import RetagPreviewModalConnector from 'Retag/RetagPreviewModalConnector';
-import fonts from 'Styles/Variables/fonts';
 import TrackFileEditorModal from 'TrackFile/Editor/TrackFileEditorModal';
 import formatBytes from 'Utilities/Number/formatBytes';
 import translate from 'Utilities/String/translate';
@@ -36,9 +35,6 @@ import AlbumDetailsLinks from './AlbumDetailsLinks';
 import AlbumDetailsMediumConnector from './AlbumDetailsMediumConnector';
 import styles from './AlbumDetails.css';
 
-const intermediateFontSize = parseInt(fonts.intermediateFontSize);
-const lineHeight = parseFloat(fonts.lineHeight);
-
 function getFanartUrl(images) {
   return _.find(images, { coverType: 'fanart' })?.url;
 }
@@ -544,12 +540,8 @@ class AlbumDetails extends Component {
                   />
 
                 </div>
-                <div className={styles.overview} title={overview}>
+
-                  <TextTruncate
+                <div className={styles.overview}>{overview}</div>
-                    line={Math.floor(125 / (intermediateFontSize * lineHeight))}
-                    text={overview}
-                  />
-                </div>
               </div>
             </div>
           </div>

frontend/src/Artist/Details/ArtistDetails.css

@@ -5,7 +5,6 @@
 .header {
   position: relative;
   width: 100%;
-  height: 310px;
 }
 
 .errorMessage {
@@ -36,20 +35,18 @@
   width: 100%;
   height: 100%;
   color: var(--white);
+  gap: 35px;
 }
 
 .poster {
   flex-shrink: 0;
-  margin-right: 35px;
   width: 250px;
   height: 250px;
 }
 
 .info {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
   overflow: hidden;
+  width: 100%;
 }
 
 .metadataMessage {
@@ -72,6 +69,8 @@
 }
 
 .title {
+  overflow: hidden;
+  max-height: calc(2 * 50px);
   font-weight: 300;
   font-size: 50px;
   line-height: 50px;
@@ -144,8 +143,12 @@
 
 .overview {
   flex: 1 0 auto;
+  overflow-x: auto;
   margin-top: 8px;
   min-height: 0;
+  max-height: 150px;
+  text-wrap: balance;
+  white-space: pre-wrap;
   font-size: $intermediateFontSize;
 }
 
@@ -163,6 +166,7 @@
   }
 
   .title {
+    max-height: calc(3 * 30px);
     font-weight: 300;
     font-size: 30px;
     line-height: 30px;

frontend/src/Artist/Details/ArtistDetails.js

@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import TextTruncate from 'react-text-truncate';
 import ArtistPoster from 'Artist/ArtistPoster';
 import DeleteArtistModal from 'Artist/Delete/DeleteArtistModal';
 import EditArtistModalConnector from 'Artist/Edit/EditArtistModalConnector';
@@ -28,7 +27,6 @@ import { align, icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
 import OrganizePreviewModalConnector from 'Organize/OrganizePreviewModalConnector';
 import RetagPreviewModalConnector from 'Retag/RetagPreviewModalConnector';
 import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileNameConnector';
-import fonts from 'Styles/Variables/fonts';
 import TrackFileEditorModal from 'TrackFile/Editor/TrackFileEditorModal';
 import formatBytes from 'Utilities/Number/formatBytes';
 import translate from 'Utilities/String/translate';
@@ -42,9 +40,6 @@ import ArtistGenres from './ArtistGenres';
 import ArtistTagsConnector from './ArtistTagsConnector';
 import styles from './ArtistDetails.css';
 
-const defaultFontSize = parseInt(fonts.defaultFontSize);
-const lineHeight = parseFloat(fonts.lineHeight);
-
 function getFanartUrl(images) {
   return _.find(images, { coverType: 'fanart' })?.url;
 }
@@ -394,7 +389,7 @@ class ArtistDetails extends Component {
                       />
                     </div>
 
-                    <div className={styles.title}>
+                    <div className={styles.title} title={artistName}>
                       {artistName}
                     </div>
 
@@ -595,12 +590,8 @@ class ArtistDetails extends Component {
 
                   }
                 </div>
-                <div className={styles.overview}>
+
-                  <TextTruncate
+                <div className={styles.overview}>{overview}</div>
-                    line={Math.floor(125 / (defaultFontSize * lineHeight))}
-                    text={overview}
-                  />
-                </div>
               </div>
             </div>
           </div>