From 821f48502211ffb2bcf6d796fb8565e6fd9c0ef7 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Wed, 28 May 2025 17:33:35 -0400
Subject: [PATCH] fix(ui): improve playlist details layout with word break and
 stats styling

Signed-off-by: Deluan <deluan@navidrome.org>
---
 ui/src/playlist/PlaylistDetails.jsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/ui/src/playlist/PlaylistDetails.jsx b/ui/src/playlist/PlaylistDetails.jsx
index 87ca1154..aead252c 100644
--- a/ui/src/playlist/PlaylistDetails.jsx
+++ b/ui/src/playlist/PlaylistDetails.jsx
@@ -69,9 +69,14 @@ const useStyles = makeStyles(
       opacity: 0.5,
     },
     title: {
-      whiteSpace: 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
+      wordBreak: 'break-word',
+    },
+    stats: {
+      marginTop: '1em',
+      marginBottom: '0.5em',
+      display: 'inline-block',
     },
   }),
   {
@@ -143,7 +148,7 @@ const PlaylistDetails = (props) => {
             >
               {record.name || translate('ra.page.loading')}
             </Typography>
-            <Typography component="p">
+            <Typography component="p" className={classes.stats}>
               {record.songCount ? (
                 <span>
                   {record.songCount}{' '}