Prevent "ReaderChapterViewer" from overlapping each other

Seems like not all browsers handle

width/height: 100%
min-width/min-height: fit-content

correctly.
the "min" setting just never applies and the size is stuck at 100%.

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

@@ -344,10 +344,8 @@ const BaseReaderChapterViewer = ({
     return (
         <Stack
             sx={{
-                width: '100%',
+                width: 'fit-content',
-                minWidth: 'fit-content',
+                height: 'fit-content',
-                height: '100%',
-                minHeight: 'fit-content',
                 margin: 'auto',
                 flexWrap: 'nowrap',
                 ...applyStyles(shouldHideChapter, {

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

@@ -141,14 +141,10 @@ const BaseReaderTransitionPage = ({
                     transform: 'scale(1)',
                     ...applyStyles(isContinuousVerticalReadingMode(readingMode), {
                         minHeight: `calc(100vh - ${scrollbarXSize}px)`,
-                        maxWidth: '100%',
-                        width: '100%',
                         ...applyStyles(!isFitWidthPageScaleMode, { alignItems: 'baseline' }),
                     }),
                     ...applyStyles(readingMode === ReadingMode.CONTINUOUS_HORIZONTAL, {
                         minWidth: `calc(100vw - ${scrollbarYSize}px - ${readerNavBarWidth}px)`,
-                        maxHeight: '100%',
-                        height: '100%',
                         justifyContent: 'unset',
                     }),
                 }),