From b86d184cb3f3171166a5bc017c794e007c006741 Mon Sep 17 00:00:00 2001
From: ebkalderon <ebkalderon@users.noreply.github.com>
Date: Tue, 27 Jan 2026 16:11:21 -0500
Subject: [PATCH] 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 | 2 +-
 src/controllers/lyrics.html            | 2 +-
 src/controllers/lyrics.js              | 2 +-
 src/styles/librarybrowser.scss         | 5 +++++
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/controllers/itemDetails/index.html b/src/controllers/itemDetails/index.html
index 036d97670..d9a7c353f 100644
--- a/src/controllers/itemDetails/index.html
+++ b/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">
diff --git a/src/controllers/lyrics.html b/src/controllers/lyrics.html
index 79b923678..bf8ac99eb 100644
--- a/src/controllers/lyrics.html
+++ b/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>
diff --git a/src/controllers/lyrics.js b/src/controllers/lyrics.js
index 74f674140..0466b34f5 100644
--- a/src/controllers/lyrics.js
+++ b/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;
diff --git a/src/styles/librarybrowser.scss b/src/styles/librarybrowser.scss
index 164a2dc8f..1c48779b9 100644
--- a/src/styles/librarybrowser.scss
+++ b/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;
+}