diff --git a/ui/src/common/CollapsibleComment.js b/ui/src/common/CollapsibleComment.js
index f0485b2e..8660d049 100644
--- a/ui/src/common/CollapsibleComment.js
+++ b/ui/src/common/CollapsibleComment.js
@@ -39,6 +39,10 @@ export const CollapsibleComment = ({ record }) => {
     setExpanded(!expanded)
   }, [expanded, setExpanded])
 
+  if (lines.length === 0) {
+    return null
+  }
+
   return (
     <Collapse
       collapsedHeight={'2em'}
diff --git a/ui/src/playlist/PlaylistDetails.js b/ui/src/playlist/PlaylistDetails.js
index 80ac07c3..f8c06bba 100644
--- a/ui/src/playlist/PlaylistDetails.js
+++ b/ui/src/playlist/PlaylistDetails.js
@@ -50,7 +50,6 @@ const PlaylistDetails = (props) => {
         <Typography variant="h5" className={classes.title}>
           {record.name || translate('ra.page.loading')}
         </Typography>
-        <CollapsibleComment record={record} />
         <Typography component="p">
           {record.songCount ? (
             <span>
@@ -67,6 +66,7 @@ const PlaylistDetails = (props) => {
             <span>&nbsp;</span>
           )}
         </Typography>
+        <CollapsibleComment record={record} />
       </CardContent>
     </Card>
   )