From 9d6394fe2b06e327ac86ffdc916da60c6d0a293d Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Fri, 6 Feb 2026 18:00:56 +0800
Subject: [PATCH] fix(layout): fixed page navigation buttons have higher
 z-index than TTS control button (#3184)

---
 .../reader/components/PageNavigationButtons.tsx  | 16 ++++++----------
 apps/readest-app/src/utils/style.ts              |  2 +-
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/PageNavigationButtons.tsx b/apps/readest-app/src/app/reader/components/PageNavigationButtons.tsx
index 2ddf484c..8c1c7b5c 100644
--- a/apps/readest-app/src/app/reader/components/PageNavigationButtons.tsx
+++ b/apps/readest-app/src/app/reader/components/PageNavigationButtons.tsx
@@ -64,12 +64,10 @@ const PageNavigationButtons: React.FC<PageNavigationButtonsProps> = ({
       <button
         onClick={handleGoLeftPage}
         className={clsx(
-          'absolute left-2 z-10 -translate-y-1/2',
-          'flex items-center justify-center',
+          'absolute left-2 -translate-y-1/2',
+          'flex h-20 w-20 items-center justify-center',
           'transition-opacity duration-300 focus:outline-none',
-          isPageNavigationButtonsVisible
-            ? 'top-1/2 h-20 w-20 opacity-100'
-            : 'bottom-12 h-10 w-10 opacity-0',
+          isPageNavigationButtonsVisible ? 'top-1/2 opacity-100' : 'bottom-12 opacity-0',
         )}
         aria-label={getLeftPageLabel()}
         tabIndex={0}
@@ -89,12 +87,10 @@ const PageNavigationButtons: React.FC<PageNavigationButtonsProps> = ({
       <button
         onClick={handleGoRightPage}
         className={clsx(
-          'absolute right-2 z-10 -translate-y-1/2',
-          'flex items-center justify-center',
+          'absolute right-2 -translate-y-1/2',
+          'flex h-20 w-20 items-center justify-center',
           'transition-opacity duration-300 focus:outline-none',
-          isPageNavigationButtonsVisible
-            ? 'top-1/2 h-20 w-20 opacity-100'
-            : 'bottom-12 h-10 w-10 opacity-0',
+          isPageNavigationButtonsVisible ? 'top-1/2 opacity-100' : 'bottom-12 opacity-0',
         )}
         aria-label={getRightPageLabel()}
         tabIndex={0}
diff --git a/apps/readest-app/src/utils/style.ts b/apps/readest-app/src/utils/style.ts
index 9e048231..6fbda1a3 100644
--- a/apps/readest-app/src/utils/style.ts
+++ b/apps/readest-app/src/utils/style.ts
@@ -841,7 +841,7 @@ export const applyTableStyle = (document: Document) => {
     const computedTableStyle = window.getComputedStyle(table);
     const computedWidth = computedTableStyle.width;
     if (computedWidth && computedWidth !== 'auto' && computedWidth !== '0px') {
-      table.style.width = `calc(min(${computedWidth}, var(--available-width)))`;
+      table.style.width = `calc(min(${computedWidth}, var(--available-width) * 1px))`;
     }
     if (totalTableWidth > 0) {
       const scale = `calc(min(1, var(--available-width) / ${totalTableWidth}))`;