Fix mobile progress bar current page slot position

Regression 9595076dae

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
 

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,7 +23,11 @@ export const ReaderProgressBarCurrentPageSlot = ({
     boxProps,
     children,
     progressBarPosition,
-}: CurrentPageSlotProps & { children?: ReactNode }) => (
+}: CurrentPageSlotProps & { children?: ReactNode }) => {
+    const coercedTotalPages = coerceIn(pagesLength - 1, 1);
+    const coercedCurrentPagesIndex = coerceIn(currentPagesIndex - 1, 0, coercedTotalPages);
+
+    return (
         <CustomTooltip
             title={pageName}
             slotProps={{
@@ -37,14 +42,14 @@ export const ReaderProgressBarCurrentPageSlot = ({
                     position: 'absolute',
                     cursor: isDragging ? 'grabbing' : 'grab',
                     ...applyStyles(getProgressBarPositionInfo(progressBarPosition).isHorizontal, {
-                    left: `${(Math.max(0, currentPagesIndex - 1) / pagesLength) * 100}%`,
-                    width: `calc(100% / ${pagesLength})`,
+                        left: `${(coercedCurrentPagesIndex / coercedTotalPages) * 100}%`,
+                        width: `calc(100% / ${coercedTotalPages})`,
                         height: '100%',
                     }),
                     ...applyStyles(getProgressBarPositionInfo(progressBarPosition).isVertical, {
-                    top: `${(Math.max(0, currentPagesIndex - 1) / pagesLength) * 100}%`,
+                        top: `${(coercedCurrentPagesIndex / coercedTotalPages) * 100}%`,
                         width: '100%',
-                    height: `calc(100% / ${pagesLength})`,
+                        height: `calc(100% / ${coercedTotalPages})`,
                     }),
                     ...boxProps?.sx,
                 }}
@@ -53,3 +58,4 @@ export const ReaderProgressBarCurrentPageSlot = ({
             </Box>
         </CustomTooltip>
     );
+};

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',

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 = () => {};