Backport pull request #7461 from jellyfin-web/release-10.11.z

Fix alignment of music lyrics containing RTL or bidi text

Original-merge: c46637f58d64c1fee9fd2364c98060e7e6c66a2a

Merged-by: thornbill <thornbill@users.noreply.github.com>

Backported-by: thornbill <thornbill@users.noreply.github.com>

src/controllers/itemDetails/index.html

@@ -202,7 +202,7 @@
 
             <div id="lyricsSection" class="verticalSection-extrabottompadding detailVerticalSection lyricsContainer hide">
                 <h2 class="sectionTitle sectionTitle-cards padded-right">${Lyrics}</h2>
-                <div is="emby-itemscontainer" class="vertical-list itemsContainer"></div>
+                <div is="emby-itemscontainer" class="vertical-list lyricsLineContainer" dir="auto"></div>
             </div>
 
             <div class="verticalSection detailVerticalSection moreFromArtistSection hide">

src/controllers/lyrics.html

@@ -1,6 +1,6 @@
 <div id="lyricPage" data-role="page" class="page lyricPage" data-backbutton="true">
     <div>
-        <div class="lyricsContainer padded-bottom-page">
+        <div class="lyricsContainer padded-bottom-page" dir="auto">
         </div>
     </div>
 </div>

src/controllers/lyrics.js

@@ -32,7 +32,7 @@ function lyricHtmlReducer(htmlAccumulator, lyric, index) {
     const lyricTime = typeof lyric.Start !== 'undefined' ? `data-lyrictime="${lyric.Start}"` : '';
 
     htmlAccumulator += `<${elem} class="lyricsLine ${classes.join(' ')}" id="lyricPosition${index}" ${lyricTime}>
-    <bdi>${escapeHtml(lyric.Text)}</bdi>
+    ${escapeHtml(lyric.Text)}
 </${elem}>`;
 
     return htmlAccumulator;

src/styles/librarybrowser.scss

@@ -1492,3 +1492,8 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
     padding-left: 0.8em;
     padding-right: 0.8em;
 }
+
+.lyricsLineContainer {
+    margin: 0;
+    width: fit-content;
+}