From a0385ca53f4690914f313c78bbfc0e3cd94e3aaf Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Thu, 13 Jul 2023 21:07:27 +0300
Subject: [PATCH] Fix displaying long paths in Preview Rename & Preview Retag

---
 frontend/src/Artist/Details/AlbumGroupInfo.css             | 2 +-
 .../src/Components/DescriptionList/DescriptionListItem.js  | 4 +++-
 frontend/src/Organize/OrganizePreviewRow.css               | 1 +
 frontend/src/Retag/RetagPreviewRow.css                     | 7 +++++++
 frontend/src/Retag/RetagPreviewRow.css.d.ts                | 1 +
 frontend/src/Retag/RetagPreviewRow.js                      | 1 +
 6 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Artist/Details/AlbumGroupInfo.css b/frontend/src/Artist/Details/AlbumGroupInfo.css
index b3102d230..9a414e728 100644
--- a/frontend/src/Artist/Details/AlbumGroupInfo.css
+++ b/frontend/src/Artist/Details/AlbumGroupInfo.css
@@ -5,7 +5,7 @@
 }
 
 .description {
-  composes: title from '~Components/DescriptionList/DescriptionListItemDescription.css';
+  composes: description from '~Components/DescriptionList/DescriptionListItemDescription.css';
 
   margin-left: 110px;
 }
diff --git a/frontend/src/Components/DescriptionList/DescriptionListItem.js b/frontend/src/Components/DescriptionList/DescriptionListItem.js
index aac01a6b5..931557045 100644
--- a/frontend/src/Components/DescriptionList/DescriptionListItem.js
+++ b/frontend/src/Components/DescriptionList/DescriptionListItem.js
@@ -10,6 +10,7 @@ class DescriptionListItem extends Component {
 
   render() {
     const {
+      className,
       titleClassName,
       descriptionClassName,
       title,
@@ -17,7 +18,7 @@ class DescriptionListItem extends Component {
     } = this.props;
 
     return (
-      <div>
+      <div className={className}>
         <DescriptionListItemTitle
           className={titleClassName}
         >
@@ -35,6 +36,7 @@ class DescriptionListItem extends Component {
 }
 
 DescriptionListItem.propTypes = {
+  className: PropTypes.string,
   titleClassName: PropTypes.string,
   descriptionClassName: PropTypes.string,
   title: PropTypes.string,
diff --git a/frontend/src/Organize/OrganizePreviewRow.css b/frontend/src/Organize/OrganizePreviewRow.css
index 18592cf2e..5df2e1cd3 100644
--- a/frontend/src/Organize/OrganizePreviewRow.css
+++ b/frontend/src/Organize/OrganizePreviewRow.css
@@ -17,4 +17,5 @@
 
 .path {
   margin-left: 10px;
+  word-break: break-word;
 }
diff --git a/frontend/src/Retag/RetagPreviewRow.css b/frontend/src/Retag/RetagPreviewRow.css
index 771f3c486..3d956c1f3 100644
--- a/frontend/src/Retag/RetagPreviewRow.css
+++ b/frontend/src/Retag/RetagPreviewRow.css
@@ -22,5 +22,12 @@
 
 .path {
   margin-left: 10px;
+  word-break: break-word;
   font-weight: bold;
 }
+
+.description {
+  composes: description from '~Components/DescriptionList/DescriptionListItemDescription.css';
+
+  word-break: break-word;
+}
diff --git a/frontend/src/Retag/RetagPreviewRow.css.d.ts b/frontend/src/Retag/RetagPreviewRow.css.d.ts
index 5e1bc5be9..7ad9a4a3f 100644
--- a/frontend/src/Retag/RetagPreviewRow.css.d.ts
+++ b/frontend/src/Retag/RetagPreviewRow.css.d.ts
@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'column': string;
+  'description': string;
   'path': string;
   'row': string;
   'selectedContainer': string;
diff --git a/frontend/src/Retag/RetagPreviewRow.js b/frontend/src/Retag/RetagPreviewRow.js
index 5f5a99341..2b94ef202 100644
--- a/frontend/src/Retag/RetagPreviewRow.js
+++ b/frontend/src/Retag/RetagPreviewRow.js
@@ -82,6 +82,7 @@ class RetagPreviewRow extends Component {
                   <DescriptionListItem
                     key={field}
                     title={field}
+                    descriptionClassName={styles.description}
                     data={formatChange(field, oldValue, newValue)}
                   />
                 );