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',
                         }),