diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js
index da0945ec9ca..1a2b9c503e9 100644
--- a/src/controllers/itemDetails/index.js
+++ b/src/controllers/itemDetails/index.js
@@ -440,12 +440,12 @@ function renderName(item, container, context) {
         if (parentNameLast) {
             // Music
             if (layoutManager.mobile) {
-                html = '<h3 class="parentName musicParentName">' + parentNameHtml.join('</br>') + '</h3>';
+                html = '<h3 class="parentName infoText musicParentName">' + parentNameHtml.join('</br>') + '</h3>';
             } else {
-                html = '<h3 class="parentName musicParentName focuscontainer-x">' + parentNameHtml.join(' - ') + '</h3>';
+                html = '<h3 class="parentName infoText musicParentName focuscontainer-x">' + parentNameHtml.join(' - ') + '</h3>';
             }
         } else {
-            html = '<h1 class="parentName focuscontainer-x"><bdi>' + tvShowHtml + '</bdi></h1>';
+            html = '<h1 class="parentName infoText focuscontainer-x"><bdi>' + tvShowHtml + '</bdi></h1>';
         }
     }
 
diff --git a/src/styles/librarybrowser.scss b/src/styles/librarybrowser.scss
index 75a6cc53cfe..fe629541416 100644
--- a/src/styles/librarybrowser.scss
+++ b/src/styles/librarybrowser.scss
@@ -672,14 +672,6 @@
 .itemName {
     margin: 0.5em 0;
     font-weight: 600;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-
-    .layout-mobile & {
-        white-space: normal;
-        overflow: visible;
-    }
 }
 
 .itemName.originalTitle {
@@ -711,6 +703,13 @@
     margin: 0.5em 0 0.5em;
 }
 
+.layout-desktop .itemName,
+.layout-desktop .parentName {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
 .nameContainer {
     display: flex;
     flex-direction: column;