From b3d1085ddfc0177e6845fe6177927a86bccdc5ff Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Wed, 18 Jun 2025 20:25:32 +0800
Subject: [PATCH] fix: now it's possible to have multiple columns in portrait
 mode, closes #1369 (#1413)

---
 .../src/app/reader/components/FoliateViewer.tsx     |  7 +++----
 .../app/reader/components/settings/LayoutPanel.tsx  | 13 ++++++-------
 packages/foliate-js                                 |  2 +-
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
index f9f96b1b..3c40624b 100644
--- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
+++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
@@ -181,10 +181,6 @@ const FoliateViewer: React.FC<{
       document.body.append(view);
       containerRef.current?.appendChild(view);
 
-      const containerRect = containerRef.current?.getBoundingClientRect();
-      const width = containerRect?.width || window.innerWidth;
-      const height = containerRect?.height || window.innerHeight;
-
       const viewSettings = getViewSettings(bookKey)!;
       const writingMode = viewSettings.writingMode;
       if (writingMode) {
@@ -210,6 +206,9 @@ const FoliateViewer: React.FC<{
           detail.allowScript = viewSettings.allowScript ?? false;
         }
       });
+      const containerRect = containerRef.current?.getBoundingClientRect();
+      const width = containerRect?.width || window.innerWidth;
+      const height = containerRect?.height || window.innerHeight;
       book.transformTarget?.addEventListener('data', getDocTransformHandler({ width, height }));
       view.renderer.setStyles?.(getStyles(viewSettings));
 
diff --git a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx
index f0879b7e..d1ceefce 100644
--- a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx
@@ -156,7 +156,6 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       false,
       false,
     );
-    console.log('compactMarginRightPx', compactMarginRightPx, viewSettings.compactMarginRightPx);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [compactMarginRightPx]);
 
@@ -460,17 +459,17 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               step={4}
             />
             <NumberInput
-              label={_('Right Margin (px)')}
-              value={showHeader && isVertical ? marginRightPx : compactMarginRightPx}
-              onChange={showHeader && isVertical ? setMarginRightPx : setCompactMarginRightPx}
+              label={_('Left Margin (px)')}
+              value={showFooter && isVertical ? marginLeftPx : compactMarginLeftPx}
+              onChange={showFooter && isVertical ? setMarginLeftPx : setCompactMarginLeftPx}
               min={0}
               max={88}
               step={4}
             />
             <NumberInput
-              label={_('Left Margin (px)')}
-              value={showFooter && isVertical ? marginLeftPx : compactMarginLeftPx}
-              onChange={showFooter && isVertical ? setMarginLeftPx : setCompactMarginLeftPx}
+              label={_('Right Margin (px)')}
+              value={showHeader && isVertical ? marginRightPx : compactMarginRightPx}
+              onChange={showHeader && isVertical ? setMarginRightPx : setCompactMarginRightPx}
               min={0}
               max={88}
               step={4}
diff --git a/packages/foliate-js b/packages/foliate-js
index fdde2bf6..e6db07ad 160000
--- a/packages/foliate-js
+++ b/packages/foliate-js
@@ -1 +1 @@
-Subproject commit fdde2bf6ed9fe8f5d45867bea48531123c5a673e
+Subproject commit e6db07ada9dc349c98021c206b8a7ae9a9621ded