From 1fd7624e9805daa5a593091e195e133f4ecc0f53 Mon Sep 17 00:00:00 2001
From: Constantin Piber <59023762+cpiber@users.noreply.github.com>
Date: Mon, 24 Mar 2025 23:23:50 +0100
Subject: [PATCH] Fixes places inreader where navbar width was not considered
 (#908)

* Fixes two places where navbar was not considered

When set to static, the navbar consumes space, so `vw` units are not
enough.
On small screens, the `left`+`transform` approach does not work nicely,
so just use standard flex alignment, the container is already a flexbox.

* Change card also consider wide viewports

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

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>

* Reader: Apply new alignment code also to horizontal scroll mode

---------

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>
---
 .../viewer/ReaderTransitionPage.tsx           | 28 ++++++++-----------
 .../reader/utils/ReaderPager.utils.tsx        |  8 +-----
 2 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/src/modules/reader/components/viewer/ReaderTransitionPage.tsx b/src/modules/reader/components/viewer/ReaderTransitionPage.tsx
index 111811e4..0cf2e3f4 100644
--- a/src/modules/reader/components/viewer/ReaderTransitionPage.tsx
+++ b/src/modules/reader/components/viewer/ReaderTransitionPage.tsx
@@ -140,12 +140,18 @@ const BaseReaderTransitionPage = ({
                     position: 'relative',
                     transform: 'scale(1)',
                     ...applyStyles(isContinuousVerticalReadingMode(readingMode), {
+                        maxWidth: `calc(100vw - ${scrollbarYSize}px - ${readerNavBarWidth}px)`,
+                        position: 'sticky',
+                        left: 0,
                         minHeight: `calc(100vh - ${scrollbarXSize}px)`,
                         ...applyStyles(!isFitWidthPageScaleMode, { alignItems: 'baseline' }),
                     }),
                     ...applyStyles(readingMode === ReadingMode.CONTINUOUS_HORIZONTAL, {
+                        flexDirection: 'row',
+                        maxHeight: `calc(100vh - ${scrollbarXSize}px)`,
+                        position: 'sticky',
+                        top: 0,
                         minWidth: `calc(100vw - ${scrollbarYSize}px - ${readerNavBarWidth}px)`,
-                        justifyContent: 'unset',
                     }),
                 }),
             }}
@@ -153,26 +159,14 @@ const BaseReaderTransitionPage = ({
             <Stack
                 sx={{
                     gap: 2,
-                    maxWidth: `calc(100vw - ${scrollbarYSize}px)`,
+                    maxWidth: (theme) =>
+                        // spacing = added padding left + right
+                        `calc(100vw - ${scrollbarYSize}px - ${readerNavBarWidth}px - ${theme.spacing(2)})`,
                     maxHeight: `calc(100vh - ${scrollbarXSize}px)`,
                     width: 'max-content',
                     p: 1,
                     ...applyStyles(isContinuousReadingMode(readingMode), {
-                        position: 'sticky',
-                        ...applyStyles(
-                            // on small screens with "fit to with" enabled, "left 50%" does not center the element in the
-                            // viewport which then causes "translate" to move the element mostly outside the viewport with
-                            // only a small part of it being visible
-                            !isFitWidthPageScaleMode && isContinuousVerticalReadingMode(readingMode),
-                            {
-                                left: '50%',
-                                transform: 'translateX(-50%)',
-                            },
-                        ),
-                        ...applyStyles(readingMode === ReadingMode.CONTINUOUS_HORIZONTAL, {
-                            top: '50%',
-                            transform: 'translateY(-50%)',
-                        }),
+                        alignSelf: 'center',
                     }),
                 }}
             >
diff --git a/src/modules/reader/utils/ReaderPager.utils.tsx b/src/modules/reader/utils/ReaderPager.utils.tsx
index 699823fd..70c0842b 100644
--- a/src/modules/reader/utils/ReaderPager.utils.tsx
+++ b/src/modules/reader/utils/ReaderPager.utils.tsx
@@ -72,13 +72,7 @@ export const getImagePlaceholderStyling = (
 ): CSSObject => {
     const OVER_9000 = 9000;
 
-    const getMaxWidth = (width: string) => {
-        if (width === '100vw') {
-            return `calc(${width} - ${widthOffset}px)`;
-        }
-
-        return width;
-    };
+    const getMaxWidth = (width: string) => `calc(${width} - ${widthOffset}px)`;
     const getDesktopWidth = (width: number, readerWidthValue?: number) =>
         getMaxWidth(`${coerceIn(readerWidthValue ?? width, Math.min(width, readerWidthValue ?? OVER_9000), width)}vw`);