From a9a1dc8e70cc572421c654f0375ad5a2434f2be9 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Fri, 6 Feb 2026 00:46:47 +0800
Subject: [PATCH] fix(layout): fixed regression of vertical alignment, closes
 #3012 (#3178)

---
 .../app/library/components/SettingsMenu.tsx   |  1 +
 .../app/reader/components/FoliateViewer.tsx   |  4 ++--
 .../components/PageNavigationButtons.tsx      | 22 ++++++++++---------
 apps/readest-app/src/utils/style.ts           | 11 +++++-----
 packages/foliate-js                           |  2 +-
 5 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/apps/readest-app/src/app/library/components/SettingsMenu.tsx b/apps/readest-app/src/app/library/components/SettingsMenu.tsx
index 601099ea..9df5bc66 100644
--- a/apps/readest-app/src/app/library/components/SettingsMenu.tsx
+++ b/apps/readest-app/src/app/library/components/SettingsMenu.tsx
@@ -282,6 +282,7 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ onPullLibrary, setIsDropdow
                   : _('Never synced')
               }
               Icon={user ? MdSync : MdSyncProblem}
+              labelClass='ps-2 pe-1 !mx-0'
               iconClassName={user && isSyncing ? 'animate-reverse-spin' : ''}
               onClick={onPullLibrary.bind(null, true, true)}
             />
diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
index 61f3f37f..0030a6f7 100644
--- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
+++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
@@ -340,8 +340,8 @@ const FoliateViewer: React.FC<{
       });
       const viewWidth = appService?.isMobile ? screen.width : window.innerWidth;
       const viewHeight = appService?.isMobile ? screen.height : window.innerHeight;
-      const width = viewWidth;
-      const height = viewHeight;
+      const width = viewWidth - insets.left - insets.right;
+      const height = viewHeight - insets.top - insets.bottom;
       book.transformTarget?.addEventListener('data', getDocTransformHandler({ width, height }));
       view.renderer.setStyles?.(getStyles(viewSettings));
       applyTranslationStyle(viewSettings);
diff --git a/apps/readest-app/src/app/reader/components/PageNavigationButtons.tsx b/apps/readest-app/src/app/reader/components/PageNavigationButtons.tsx
index 51d3c60f..2ddf484c 100644
--- a/apps/readest-app/src/app/reader/components/PageNavigationButtons.tsx
+++ b/apps/readest-app/src/app/reader/components/PageNavigationButtons.tsx
@@ -64,11 +64,12 @@ const PageNavigationButtons: React.FC<PageNavigationButtonsProps> = ({
       <button
         onClick={handleGoLeftPage}
         className={clsx(
-          'absolute left-2 top-1/2 z-10 -translate-y-1/2',
-          'flex h-20 w-20 items-center justify-center',
-          'transition-opacity duration-300',
-          'focus:opacity-100 focus:outline-none',
-          isPageNavigationButtonsVisible ? 'opacity-100' : 'opacity-0',
+          'absolute left-2 z-10 -translate-y-1/2',
+          'flex 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',
         )}
         aria-label={getLeftPageLabel()}
         tabIndex={0}
@@ -88,11 +89,12 @@ const PageNavigationButtons: React.FC<PageNavigationButtonsProps> = ({
       <button
         onClick={handleGoRightPage}
         className={clsx(
-          'absolute right-2 top-1/2 z-10 -translate-y-1/2',
-          'flex h-20 w-20 items-center justify-center',
-          'transition-opacity duration-300',
-          'focus:opacity-100 focus:outline-none',
-          isPageNavigationButtonsVisible ? 'opacity-100' : 'opacity-0',
+          'absolute right-2 z-10 -translate-y-1/2',
+          'flex 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',
         )}
         aria-label={getRightPageLabel()}
         tabIndex={0}
diff --git a/apps/readest-app/src/utils/style.ts b/apps/readest-app/src/utils/style.ts
index d33d7793..9e048231 100644
--- a/apps/readest-app/src/utils/style.ts
+++ b/apps/readest-app/src/utils/style.ts
@@ -700,7 +700,7 @@ export const transformStylesheet = (css: string, vw: number, vh: number, vertica
             /}$/,
             ' width: calc(var(--_max-width) + var(--page-margin-left) + var(--page-margin-right)) !important; }',
           )
-          .replace(/}$/, ' max-width: 100vw !important; }');
+          .replace(/}$/, ' max-width: calc(var(--full-width) * 1px) !important; }');
       }
       if (
         !/height\s*:/.test(block) &&
@@ -712,7 +712,7 @@ export const transformStylesheet = (css: string, vw: number, vh: number, vertica
             /}$/,
             ' height: calc(100% + var(--page-margin-top) + var(--page-margin-bottom)) !important; }',
           )
-          .replace(/}$/, ' max-height: 100vh !important; }');
+          .replace(/}$/, ' max-height: calc(var(--full-height) * 1px) !important; }');
       }
     }
     return selector + block;
@@ -838,9 +838,10 @@ export const applyTableStyle = (document: Document) => {
       }
     }
 
-    const inlineWidth = table.style.width;
-    if (inlineWidth) {
-      table.style.width = `calc(min(${inlineWidth}, var(--available-width)))`;
+    const computedTableStyle = window.getComputedStyle(table);
+    const computedWidth = computedTableStyle.width;
+    if (computedWidth && computedWidth !== 'auto' && computedWidth !== '0px') {
+      table.style.width = `calc(min(${computedWidth}, var(--available-width)))`;
     }
     if (totalTableWidth > 0) {
       const scale = `calc(min(1, var(--available-width) / ${totalTableWidth}))`;
diff --git a/packages/foliate-js b/packages/foliate-js
index 8a1e7e7a..6f0a7b65 160000
--- a/packages/foliate-js
+++ b/packages/foliate-js
@@ -1 +1 @@
-Subproject commit 8a1e7e7a9cb0bb4178b194fe9af1a806ca99459d
+Subproject commit 6f0a7b657477cb612948c0063d2464b20bb3b7e1