From 89138faddefa10bbc1ddbdf6545f0343a0dd023c Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Fri, 27 Dec 2024 18:23:32 +0100
Subject: [PATCH] Reserve only necessary space for "current page" text

---
 .../progress-bar/ReaderProgressBar.tsx        | 21 ++++++++++++++++++-
 .../ReaderProgressBarPageNumber.tsx           |  1 -
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx
index 90d8d066..c0420411 100644
--- a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx
+++ b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx
@@ -7,7 +7,7 @@
  */
 
 import { BoxProps } from '@mui/material/Box';
-import { memo, ReactNode, useCallback, useMemo, useRef, ComponentProps } from 'react';
+import { memo, ReactNode, useCallback, useMemo, useRef, ComponentProps, useState } from 'react';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import { TypographyProps } from '@mui/material/Typography';
 import { StackProps } from '@mui/material/Stack';
@@ -32,6 +32,7 @@ import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
 import { ReaderProgressBarSlotWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlotWrapper.tsx';
 import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
+import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
 
 const BaseReaderProgressBar = ({
     totalPages,
@@ -71,6 +72,22 @@ const BaseReaderProgressBar = ({
     }) => {
     const progressBarRef = useRef<HTMLDivElement | null>(null);
 
+    const [totalPagesTextWidth, setTotalPagesTextWidth] = useState(0);
+    const totalPagesTextRef = useRef<HTMLSpanElement | null>(null);
+    useResizeObserver(
+        totalPagesTextRef,
+        useCallback(() => {
+            const element = totalPagesTextRef.current;
+            if (!element) {
+                return;
+            }
+
+            const { paddingLeft, paddingRight } = getComputedStyle(element);
+
+            setTotalPagesTextWidth(element.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight));
+        }, []),
+    );
+
     const currentPagesIndex = useMemo(() => getPage(currentPageIndex, pages).pagesIndex, [currentPageIndex, pages]);
 
     const isHorizontalPosition = getProgressBarPositionInfo(progressBarPosition).isHorizontal;
@@ -98,6 +115,7 @@ const BaseReaderProgressBar = ({
                     {...slotProps?.progressBarPageTexts?.base}
                     {...slotProps?.progressBarPageTexts?.current}
                     sx={[
+                        { width: `${totalPagesTextWidth}px` },
                         ...(Array.isArray(slotProps?.progressBarPageTexts?.base?.sx)
                             ? (slotProps?.progressBarPageTexts?.base?.sx ?? [])
                             : [slotProps?.progressBarPageTexts?.base?.sx]),
@@ -195,6 +213,7 @@ const BaseReaderProgressBar = ({
                     </ReaderProgressBarSlotsActionArea>
                 </ClickAwayListener>
                 <ReaderProgressBarPageNumber
+                    ref={totalPagesTextRef}
                     {...slotProps?.progressBarPageTexts?.base}
                     {...slotProps?.progressBarPageTexts?.total}
                     sx={[
diff --git a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBarPageNumber.tsx b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBarPageNumber.tsx
index 2a9fa268..a247b424 100644
--- a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBarPageNumber.tsx
+++ b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBarPageNumber.tsx
@@ -11,7 +11,6 @@ import Typography from '@mui/material/Typography';
 
 export const ReaderProgressBarPageNumber = styled(Typography)({
     boxSizing: 'content-box',
-    minWidth: '45px',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',