From 3894236c46f49423c08d6db41717232873c5b331 Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Tue, 2 Dec 2025 16:02:40 -0500
Subject: [PATCH] Backport pull request #7344 from jellyfin-web/release-10.11.z

modify TOC and button layout in book player

Original-merge: 4bdc0fd97454252c8e59dbf65d33ed0503cea23c

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

Backported-by: thornbill <thornbill@users.noreply.github.com>
---
 src/plugins/bookPlayer/plugin.js          |  1 +
 src/plugins/bookPlayer/style.scss         | 22 ++++++++++++++++++----
 src/plugins/bookPlayer/tableOfContents.js |  5 +++--
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js
index 1e0ad2a00..880a31a38 100644
--- a/src/plugins/bookPlayer/plugin.js
+++ b/src/plugins/bookPlayer/plugin.js
@@ -32,6 +32,7 @@ export class BookPlayer {
         this.type = PluginType.MediaPlayer;
         this.id = 'bookplayer';
         this.priority = 1;
+        this.THEMES = THEMES;
         if (!userSettings.theme() || userSettings.theme() === 'dark') {
             this.theme = 'dark';
         } else {
diff --git a/src/plugins/bookPlayer/style.scss b/src/plugins/bookPlayer/style.scss
index db4373018..d5c7f43a3 100644
--- a/src/plugins/bookPlayer/style.scss
+++ b/src/plugins/bookPlayer/style.scss
@@ -22,12 +22,12 @@
 
     #btnBookplayerToc {
         float: left;
-        margin-left: 2vw;
+        margin: 0.5vh 0.5vh 0.5vh 2vw;
     }
 
     #btnBookplayerExit {
         float: right;
-        margin-right: 2vw;
+        margin: 0.5vh 2vw 0.5vh 0.5vh;
     }
 
     .bookplayerErrorMsg {
@@ -46,13 +46,20 @@
     width: fit-content;
     max-height: 80%;
     max-width: 60%;
-    padding-right: 50px;
-    padding-bottom: 15px;
 
     .bookplayerButtonIcon {
         color: black;
     }
 
+    .bookplayerButton {
+        margin: 0.5vh;
+    }
+
+    .toc {
+        margin: 0;
+        padding: 30px;
+    }
+
     .toc li {
         margin-bottom: 5px;
 
@@ -80,3 +87,10 @@
         }
     }
 }
+
+@media (max-width: 60em) {
+    #dialogToc {
+        max-width: 100%;
+        max-height: 100%;
+    }
+}
diff --git a/src/plugins/bookPlayer/tableOfContents.js b/src/plugins/bookPlayer/tableOfContents.js
index 4c2012d0e..cb2686aa6 100644
--- a/src/plugins/bookPlayer/tableOfContents.js
+++ b/src/plugins/bookPlayer/tableOfContents.js
@@ -1,5 +1,6 @@
 import escapeHTML from 'escape-html';
 import dialogHelper from '../../components/dialogHelper/dialogHelper';
+import layoutManager from 'components/layoutManager';
 
 export default class TableOfContents {
     constructor(bookPlayer) {
@@ -57,7 +58,7 @@ export default class TableOfContents {
 
         // remove parent directory reference from href to fix certain books
         const link = chapter.href.startsWith('../') ? chapter.href.slice(3) : chapter.href;
-        itemHtml += `<a href="${escapeHTML(book.path.directory + link)}">${escapeHTML(chapter.label)}</a>`;
+        itemHtml += `<a style="color: ${layoutManager.mobile ? this.bookPlayer.THEMES[this.bookPlayer.theme].body.color : 'inherit'}" href="${escapeHTML(book.path.directory + link)}">${escapeHTML(chapter.label)}</a>`;
 
         if (chapter.subitems?.length) {
             const subHtml = chapter.subitems
@@ -85,7 +86,7 @@ export default class TableOfContents {
         let tocHtml = '<div class="topRightActionButtons">';
         tocHtml += '<button is="paper-icon-button-light" class="autoSize bookplayerButton btnBookplayerTocClose hide-mouse-idle-tv" tabindex="-1"><span class="material-icons bookplayerButtonIcon close" aria-hidden="true"></span></button>';
         tocHtml += '</div>';
-        tocHtml += '<ul class="toc">';
+        tocHtml += `<ul style="background-color: ${layoutManager.mobile ? this.bookPlayer.THEMES[this.bookPlayer.theme].body.background : 'inherit'}" class="toc">`;
         rendition.book.navigation.forEach((chapter) => {
             tocHtml += this.chapterTocItem(rendition.book, chapter);
         });