From 9e34afbd5db813433cad5f509482bf90ccb91791 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Tue, 12 May 2026 14:01:31 +0200
Subject: [PATCH] Fix mobile progress bar current page slot position

Regression 9595076dae0c109df7cb35c56225cd4a90d9bf2c
---
 CHANGELOG.md                                  |  1 +
 .../ReaderProgressBarCurrentPageSlot.tsx      | 64 ++++++++++---------
 .../mobile/MobileReaderProgressBar.tsx        |  4 +-
 src/lib/HelperFunctions.ts                    |  3 +-
 4 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ac7f0c81..d10d9981 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 ### Fixed
 
 - (**Reader**) Fix scrollbar appearing with "fit to widt/height/screen" page scale mode and applied safe area insets
+- (**Reader**) Fix wrongly positioned mobile progress bar current page indicator
 
 ## [20260509.01] (r3147) - 2026-05-09
 
diff --git a/src/features/reader/overlay/progress-bar/components/ReaderProgressBarCurrentPageSlot.tsx b/src/features/reader/overlay/progress-bar/components/ReaderProgressBarCurrentPageSlot.tsx
index 7e0096ea..1dccd613 100644
--- a/src/features/reader/overlay/progress-bar/components/ReaderProgressBarCurrentPageSlot.tsx
+++ b/src/features/reader/overlay/progress-bar/components/ReaderProgressBarCurrentPageSlot.tsx
@@ -13,6 +13,7 @@ import type { CurrentPageSlotProps } from '@/features/reader/overlay/progress-ba
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 import { getProgressBarPositionInfo } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
 import { READER_PROGRESS_BAR_POSITION_TO_PLACEMENT } from '@/features/reader/settings/ReaderSettings.constants.tsx';
+import { coerceIn } from '@/lib/HelperFunctions.ts';
 
 export const ReaderProgressBarCurrentPageSlot = ({
     pageName,
@@ -22,34 +23,39 @@ export const ReaderProgressBarCurrentPageSlot = ({
     boxProps,
     children,
     progressBarPosition,
-}: CurrentPageSlotProps & { children?: ReactNode }) => (
-    <CustomTooltip
-        title={pageName}
-        slotProps={{
-            tooltip: { sx: { backgroundColor: 'primary.main', color: 'primary.contrastText' } },
-        }}
-        placement={READER_PROGRESS_BAR_POSITION_TO_PLACEMENT[progressBarPosition]}
-        disableTouchListener
-    >
-        <Box
-            {...boxProps}
-            sx={{
-                position: 'absolute',
-                cursor: isDragging ? 'grabbing' : 'grab',
-                ...applyStyles(getProgressBarPositionInfo(progressBarPosition).isHorizontal, {
-                    left: `${(Math.max(0, currentPagesIndex - 1) / pagesLength) * 100}%`,
-                    width: `calc(100% / ${pagesLength})`,
-                    height: '100%',
-                }),
-                ...applyStyles(getProgressBarPositionInfo(progressBarPosition).isVertical, {
-                    top: `${(Math.max(0, currentPagesIndex - 1) / pagesLength) * 100}%`,
-                    width: '100%',
-                    height: `calc(100% / ${pagesLength})`,
-                }),
-                ...boxProps?.sx,
+}: CurrentPageSlotProps & { children?: ReactNode }) => {
+    const coercedTotalPages = coerceIn(pagesLength - 1, 1);
+    const coercedCurrentPagesIndex = coerceIn(currentPagesIndex - 1, 0, coercedTotalPages);
+
+    return (
+        <CustomTooltip
+            title={pageName}
+            slotProps={{
+                tooltip: { sx: { backgroundColor: 'primary.main', color: 'primary.contrastText' } },
             }}
+            placement={READER_PROGRESS_BAR_POSITION_TO_PLACEMENT[progressBarPosition]}
+            disableTouchListener
         >
-            {children}
-        </Box>
-    </CustomTooltip>
-);
+            <Box
+                {...boxProps}
+                sx={{
+                    position: 'absolute',
+                    cursor: isDragging ? 'grabbing' : 'grab',
+                    ...applyStyles(getProgressBarPositionInfo(progressBarPosition).isHorizontal, {
+                        left: `${(coercedCurrentPagesIndex / coercedTotalPages) * 100}%`,
+                        width: `calc(100% / ${coercedTotalPages})`,
+                        height: '100%',
+                    }),
+                    ...applyStyles(getProgressBarPositionInfo(progressBarPosition).isVertical, {
+                        top: `${(coercedCurrentPagesIndex / coercedTotalPages) * 100}%`,
+                        width: '100%',
+                        height: `calc(100% / ${coercedTotalPages})`,
+                    }),
+                    ...boxProps?.sx,
+                }}
+            >
+                {children}
+            </Box>
+        </CustomTooltip>
+    );
+};
diff --git a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx
index 48d570ae..b7df6b7e 100644
--- a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx
+++ b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx
@@ -186,7 +186,7 @@ const BaseMobileReaderProgressBar = ({
                         position: 'absolute',
                         ...applyStyles(isVertical, {
                             top: 'calc(100% - 6px)',
-                            ...applyStyles(currentPagesIndex === 0, {
+                            ...applyStyles(currentPagesIndex === 0 && pages.length > 1, {
                                 top: '0',
                             }),
                             width: '75%',
@@ -194,7 +194,7 @@ const BaseMobileReaderProgressBar = ({
                         }),
                         ...applyStyles(isHorizontal, {
                             left: 'calc(100% - 0px)',
-                            ...applyStyles(currentPagesIndex === 0, {
+                            ...applyStyles(currentPagesIndex === 0 && pages.length > 1, {
                                 left: '0',
                             }),
                             width: '6px',
diff --git a/src/lib/HelperFunctions.ts b/src/lib/HelperFunctions.ts
index 5b7c4cc6..536f061d 100644
--- a/src/lib/HelperFunctions.ts
+++ b/src/lib/HelperFunctions.ts
@@ -35,7 +35,8 @@ export const getValueFromObject = <T>(obj: Record<string, any>, key: string): T
     return keys.reduce((acc, curr) => acc?.[curr], obj) as T;
 };
 
-export const coerceIn = (value: number, min: number, max: number): number => Math.max(Math.min(value, max), min);
+export const coerceIn = (value: number, min: number, max: number = value): number =>
+    Math.max(Math.min(value, max), min);
 
 export const noOp = () => {};