Fix reader width (#567)

* Fix reader width

The margin: auto on the Box container for the image was preventing 100% width
to actually mean 100%.

Now that 100% is actually possible, I think fitPageToWindow makes more
sense as a default. Additionally, since the image can fill 100% of the
page, it can cover the ReaderNavBar, so set the z-index of the
ReaderNavBar so it's rendered on top of the image and clickable.

Signed-off-by: Chance Zibolski <chance.zibolski@gmail.com>

* Support configuring reader width for DoublePage readers

Signed-off-by: Chance Zibolski <chance.zibolski@gmail.com>

* Fix single page of DoublePageReader not being able to take up full width

In case the parent container is flex row, the container does not automatically take up 100% of the available width, thus, the page also was not able to take up 100% of the width

* Fix applying reader width to double pages

The set reader width can't be applied to each page of the double pages because otherwise it will already take up 100% of the available width with the setting only being at 50%.

Instead, the set width has to be divided by 2, so that both pages take up the set reader width

* Prevent double page spinner from being larger than 100% of the available width

* Update width styling of the page spinner

* Always center pages in the middle of the screen

* Take up full height fitting page to window height

---------

Signed-off-by: Chance Zibolski <chance.zibolski@gmail.com>
Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>

src/components/navbar/ReaderNavBar.tsx

@@ -26,7 +26,11 @@ import { useTranslation } from 'react-i18next';
 import { AllowedMetadataValueTypes, ChapterOffset, IReaderSettings, TChapter, TManga } from '@/typings';
 import { ReaderSettingsOptions } from '@/components/reader/ReaderSettingsOptions';
 
-const Root = styled('div')(({ theme }) => ({
+const Root = styled('div')({
+    zIndex: 10,
+});
+
+const NavContainer = styled('div')(({ theme }) => ({
     top: 0,
     left: 0,
     width: '300px',
@@ -198,9 +202,9 @@ export function ReaderNavBar(props: IProps) {
     };
 
     return (
-        <>
+        <Root>
             <Slide direction="right" in={drawerOpen} timeout={200} appear={false} mountOnEnter unmountOnExit>
-                <Root
+                <NavContainer
                     sx={{
                         position: 'fixed',
                     }}
@@ -374,7 +378,7 @@ export function ReaderNavBar(props: IProps) {
                             </Tooltip>
                         </ChapterNavigation>
                     </Navigation>
-                </Root>
+                </NavContainer>
             </Slide>
             <Zoom in={!drawerOpen}>
                 <Fade in={!hideOpenButton}>
@@ -392,6 +396,6 @@ export function ReaderNavBar(props: IProps) {
                     </Tooltip>
                 </Fade>
             </Zoom>
-        </>
+        </Root>
     );
 }