From aac25166378422135e624e305c410c54a39374fb Mon Sep 17 00:00:00 2001
From: Aditya Raj Singh <github@adityaraj.com>
Date: Sat, 4 Jul 2026 11:39:10 +0530
Subject: [PATCH] fix(preview): keep the EPUB table-of-contents button clear of
 the header (#6010)

---
 frontend/src/css/epubReader.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/src/css/epubReader.css b/frontend/src/css/epubReader.css
index a575fb27..c8ceb110 100644
--- a/frontend/src/css/epubReader.css
+++ b/frontend/src/css/epubReader.css
@@ -29,6 +29,13 @@
 
 .epub-reader .tocButton {
   color: var(--text);
+  /*
+   * vue-reader positions the TOC toggle at top: 10px, which lands under the
+   * fixed 4em header bar (see .header) — so clicks hit the header's Close
+   * button instead of opening the table of contents. Push it just below the
+   * header, tracking the header's height so it stays clear if that changes.
+   */
+  top: calc(4em + 10px);
 }
 
 .epub-reader .tocButton.tocButtonExpanded {