fix: now it's possible to have multiple columns in portrait mode, closes #1369 (#1413)

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));
 

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}