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/reader/pager/DoublePagedPager.tsx

@@ -175,10 +175,8 @@ export function DoublePagedPager(props: IReaderProps) {
                     display: 'flex',
                     flexDirection: settings.readerType === 'DoubleLTR' ? 'row' : 'row-reverse',
                     justifyContent: 'center',
-                    margin: '0 auto',
                     width: 'auto',
                     height: 'auto',
-                    overflowX: 'scroll',
                 }}
             >
                 {getPagesToDisplay() === 2 ? (

src/components/reader/pager/HorizontalPager.tsx

@@ -166,7 +166,6 @@ export function HorizontalPager(props: IReaderProps) {
                 display: 'flex',
                 flexDirection: settings.readerType === 'ContinuesHorizontalLTR' ? 'row' : 'row-reverse',
                 justifyContent: settings.readerType === 'ContinuesHorizontalLTR' ? 'flex-start' : 'flex-end',
-                margin: '0 auto',
                 width: 'auto',
                 height: 'auto',
                 overflowX: 'visible',

src/components/reader/pager/PagedPager.tsx

@@ -99,11 +99,10 @@ export function PagedPager(props: IReaderProps) {
             ref={selfRef}
             sx={{
                 display: 'flex',
-                flexDirection: 'row',
+                flexDirection: 'column',
                 justifyContent: 'center',
-                margin: '0 auto',
-                width: '100%',
-                height: '100vh',
+                width: 'auto',
+                height: 'auto',
             }}
             onClick={clickControl}
         >

src/components/reader/pager/VerticalPager.tsx

@@ -173,8 +173,8 @@ export function VerticalPager(props: IReaderProps) {
                 display: 'flex',
                 flexDirection: 'column',
                 justifyContent: 'center',
-                margin: '0 auto',
-                width: '100%',
+                width: 'auto',
+                height: 'auto',
                 userSelect: 'none',
             }}
             onClick={(e) => {