Fix double page with different dimensions

In case two pages were displayed with different dimensions, the bigger page might take up more than 50% of the screen.
In this case the bigger page got limited to 50% which caused in to unintentionally get reduced in size

src/modules/reader/components/viewer/ReaderPage.tsx

@@ -10,7 +10,11 @@ import { ComponentProps, ForwardedRef, forwardRef } from 'react';
 import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { ReaderCustomFilter } from '@/modules/reader/types/Reader.types.ts';
-import { getImagePlaceholderStyling, getImageWidthStyling } from '@/modules/reader/utils/ReaderPager.utils.tsx';
+import {
+    getImageMarginStyling,
+    getImagePlaceholderStyling,
+    getImageWidthStyling,
+} from '@/modules/reader/utils/ReaderPager.utils.tsx';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
 import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
@@ -91,6 +95,7 @@ export const ReaderPage = forwardRef(
                     ...applyStyles(!display, {
                         display: 'none',
                     }),
+                    ...getImageMarginStyling(readingMode.value, doublePage, position),
                 }}
                 imgStyle={{
                     ...getImageWidthStyling(
@@ -109,6 +114,7 @@ export const ReaderPage = forwardRef(
                     objectFit: 'contain',
                     objectPosition: position,
                     userSelect: 'none',
+                    ...getImageMarginStyling(readingMode.value, doublePage, position),
                 }}
             />
         );

src/modules/reader/components/viewer/pager/BasePager.tsx

@@ -11,8 +11,6 @@ import { ReactNode, useEffect, useMemo, useRef } from 'react';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { getImageWidthStyling, getPageIndexesToLoad } from '@/modules/reader/utils/ReaderPager.utils.tsx';
 import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
-import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
-import { isContinuousReadingMode, isReaderWidthEditable } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
 import { ReaderPagerProps, ReaderTransitionPageMode } from '@/modules/reader/types/Reader.types.ts';
 import { ReaderTransitionPage } from '@/modules/reader/components/viewer/ReaderTransitionPage.tsx';
 
@@ -57,14 +55,6 @@ export const BasePager = ({
                     false,
                     readerWidth.value,
                 ),
-                applyStyles(!!readerWidth?.value.enabled && isReaderWidthEditable(pageScaleMode.value), {
-                    alignItems: 'center',
-                    // both continuous pagers have content that causes scrollbars, centering this content causes content
-                    // to be cut off
-                    ...applyStyles(!isContinuousReadingMode(readingMode.value), {
-                        justifyContent: 'center',
-                    }),
-                }),
             ]}
         >
             <ReaderTransitionPage

src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx

@@ -101,8 +101,6 @@ export const ReaderDoublePagedPager = ({
                     sx: {
                         margin: 'auto',
                         flexDirection: 'row',
-                        justifyContent: 'center',
-                        alignItems: 'center',
                         ...applyStyles(themeDirection === 'ltr', {
                             flexDirection: isLtrReadingDirection ? 'row' : 'row-reverse',
                         }),

src/modules/reader/utils/ReaderPager.utils.tsx

@@ -37,9 +37,11 @@ const getPageWidth = (
     pageScaleMode: IReaderSettings['pageScaleMode'],
     isDoublePage?: boolean,
     readerWidth?: IReaderSettings['readerWidth'],
+    shouldStretchPage?: IReaderSettings['shouldStretchPage'],
     isImage?: boolean,
 ): string => {
-    if (isImage && isDoublePage) {
+    // only return 50% in case pages should get stretched, otherwise, pages might unintentionally shrink in size (e.g. 2 pages with different dimensions, the bigger page will shrink due to taking up more than 50%)
+    if (isImage && isDoublePage && shouldStretchPage) {
         return '50%';
     }
 
@@ -133,7 +135,7 @@ export const getImageWidthStyling = (
     readerWidth?: IReaderSettings['readerWidth'],
     isImage?: boolean,
 ): CSSObject => {
-    const width = getPageWidth(pageScaleMode, isDoublePage, readerWidth, isImage);
+    const width = getPageWidth(pageScaleMode, isDoublePage, readerWidth, shouldStretchPage, isImage);
 
     // setting the "width" of the wrapper is required for being able to properly size the image placeholders
     const staticReaderWidthForWrapper = applyStyles(
@@ -185,6 +187,24 @@ export const getImageWidthStyling = (
     }
 };
 
+export const getImageMarginStyling = (
+    readingMode: IReaderSettings['readingMode'],
+    doublePage: boolean,
+    objectFitPosition?: 'left' | 'right',
+): CSSObject => ({
+    ...applyStyles(!isContinuousReadingMode(readingMode), {
+        my: 'auto',
+        ...applyStyles(doublePage, {
+            // the applied margin is the opposite of the objectFitPosition
+            ...applyStyles(objectFitPosition === 'right', { ml: 'auto ' }),
+            ...applyStyles(objectFitPosition === 'left', { mr: 'auto ' }),
+        }),
+    }),
+    ...applyStyles(isContinuousReadingMode(readingMode), {
+        m: 'auto',
+    }),
+});
+
 export const createSinglePageData = (url: string, index: number): ReaderStatePages['pages'][number]['primary'] => ({
     index,
     alt: `Page #${index + 1}`,