diff --git a/ui/src/playlist/PlaylistDetails.jsx b/ui/src/playlist/PlaylistDetails.jsx
index eefed83b4..aeddf0d42 100644
--- a/ui/src/playlist/PlaylistDetails.jsx
+++ b/ui/src/playlist/PlaylistDetails.jsx
@@ -19,6 +19,7 @@ import {
   DurationField,
   SizeField,
   isWritable,
+  OverflowTooltip,
 } from '../common'
 import config from '../config'
 import subsonic from '../subsonic'
@@ -274,12 +275,14 @@ const PlaylistDetails = (props) => {
         </div>
         <div className={classes.details}>
           <CardContent className={classes.content}>
-            <Typography
-              variant={isDesktop ? 'h5' : 'h6'}
-              className={classes.title}
-            >
-              {record.name || translate('ra.page.loading')}
-            </Typography>
+            <OverflowTooltip title={record.name || ''}>
+              <Typography
+                variant={isDesktop ? 'h5' : 'h6'}
+                className={classes.title}
+              >
+                {record.name || translate('ra.page.loading')}
+              </Typography>
+            </OverflowTooltip>
             <Typography component="p" className={classes.stats}>
               {record.songCount ? (
                 <span>