Center "ReaderChapterViewers"

The viewers can have different sizes which caused theme to not be properly centered.

E.g. for the "vertical mode" in case "chapter 1" is greater in width than "chapter 2", the pages of "chapter 2" were not correctly centered due to the "viewers" having different widths.

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

@@ -10,11 +10,13 @@ import {
     ForwardedRef,
     forwardRef,
     memo,
+    useCallback,
     useEffect,
     useImperativeHandle,
     useLayoutEffect,
     useMemo,
     useRef,
+    useState,
 } from 'react';
 import Stack from '@mui/material/Stack';
 import { useTheme } from '@mui/material/styles';
@@ -180,6 +182,10 @@ const BaseReaderViewer = forwardRef(
         const handleClick = ReaderControls.useHandleClick(scrollElementRef.current);
 
         const imageRefs = useRef<(HTMLElement | null)[]>(pages.map(() => null));
+        const chapterViewerSize = useRef({ minChapterViewWidth: 0, minChapterViewHeight: 0 });
+        const { minChapterViewWidth, minChapterViewHeight } = chapterViewerSize.current;
+
+        const [, setTriggerReRender] = useState({});
 
         const inViewportType = READING_MODE_TO_IN_VIEWPORT_TYPE[readingMode];
         const isLtrReadingDirection = readingDirection === ReadingDirection.LTR;
@@ -200,6 +206,25 @@ const BaseReaderViewer = forwardRef(
             [currentChapter, chaptersToRender],
         );
 
+        const onChapterViewSizeChange = useCallback(
+            (width: number, height: number) => {
+                if (!isContinuousReadingModeActive) {
+                    return;
+                }
+
+                if (isContinuousVerticalReadingModeActive && minChapterViewWidth < width) {
+                    chapterViewerSize.current.minChapterViewWidth = width;
+                    setTriggerReRender({});
+                }
+
+                if (minChapterViewHeight < height) {
+                    chapterViewerSize.current.minChapterViewHeight = height;
+                    setTriggerReRender({});
+                }
+            },
+            [isContinuousReadingModeActive, isContinuousVerticalReadingModeActive],
+        );
+
         useReaderHandlePageSelection(
             pageToScrollToIndex,
             currentPageIndex,
@@ -342,6 +367,9 @@ const BaseReaderViewer = forwardRef(
                             scrollbarXSize={scrollbarXSize}
                             scrollbarYSize={scrollbarYSize}
                             readerNavBarWidth={readerNavBarWidth}
+                            onSizeChange={onChapterViewSizeChange}
+                            minWidth={minChapterViewWidth}
+                            minHeight={minChapterViewHeight}
                         />
                     );
                 })}