From 4662a9175f8638c424b4f8a78ef9ff3000089940 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Fri, 6 Sep 2024 23:50:38 +0200
Subject: [PATCH] Always use calculated scrollbar size

---
 src/components/chapter/ChapterList.tsx | 10 +++++++---
 src/components/reader/Page.tsx         |  2 +-
 src/lib/ui/MediaQuery.tsx              | 10 ++++++++--
 src/screens/Reader.tsx                 |  2 +-
 src/theme.ts                           |  2 +-
 5 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/chapter/ChapterList.tsx b/src/components/chapter/ChapterList.tsx
index e9a2b6f2..60160dcf 100644
--- a/src/components/chapter/ChapterList.tsx
+++ b/src/components/chapter/ChapterList.tsx
@@ -45,11 +45,12 @@ import { Mangas } from '@/lib/data/Mangas';
 import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
 import { useResizeObserver } from '@/util/useResizeObserver.tsx';
 import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
-import { SCROLLBAR_SIZE } from '@/theme.ts';
 
-const ChapterListHeader = styled(Stack)(({ theme }) => ({
+const ChapterListHeader = styled(Stack, { shouldForwardProp: (prop) => prop !== 'scrollbarWidth' })<{
+    scrollbarWidth: number;
+}>(({ theme, scrollbarWidth }) => ({
     padding: theme.spacing(1),
-    paddingRight: `calc(${SCROLLBAR_SIZE}px + ${theme.spacing(1)})`,
+    paddingRight: `calc(${scrollbarWidth}px + ${theme.spacing(1)})`,
     paddingBottom: 0,
     [theme.breakpoints.down('md')]: {
         paddingRight: theme.spacing(1),
@@ -90,6 +91,8 @@ export const ChapterList = ({
         useCallback(() => setChapterListHeaderHeight(chapterListHeaderRef?.offsetHeight ?? 0), [chapterListHeaderRef]),
     );
 
+    const scrollbarWidth = MediaQuery.useGetScrollbarSize('width');
+
     const { data: downloaderData } = requestManager.useGetDownloadStatus();
     const queue = downloaderData?.downloadStatus.queue ?? [];
 
@@ -183,6 +186,7 @@ export const ChapterList = ({
                     direction="row"
                     alignItems="center"
                     justifyContent="space-between"
+                    scrollbarWidth={scrollbarWidth}
                 >
                     <Typography variant="h5" component="h3">
                         {`${visibleChapters.length} ${t('chapter.title_one', {
diff --git a/src/components/reader/Page.tsx b/src/components/reader/Page.tsx
index f62288f0..93f7fd4a 100644
--- a/src/components/reader/Page.tsx
+++ b/src/components/reader/Page.tsx
@@ -21,7 +21,7 @@ export function imageStyle(settings: IReaderSettings): CSSProperties {
     const isVertical = settings.readerType === 'ContinuesVertical';
     const isHorizontal = isHorizontalReaderType(settings.readerType);
 
-    const scrollbarHeight = MediaQuery.useGetScrollbarSize();
+    const scrollbarHeight = MediaQuery.useGetScrollbarSize('height');
 
     const baseStyling: CSSProperties = {
         margin: 0,
diff --git a/src/lib/ui/MediaQuery.tsx b/src/lib/ui/MediaQuery.tsx
index 5a7ad26e..27878a5d 100644
--- a/src/lib/ui/MediaQuery.tsx
+++ b/src/lib/ui/MediaQuery.tsx
@@ -27,12 +27,18 @@ export class MediaQuery {
         return this.useIsBelowWidth('sm');
     }
 
-    static useGetScrollbarSize(): number {
+    static useGetScrollbarSize(type: 'height' | 'width'): number {
         const [scrollbarSize, setScrollbarSize] = useState(0);
 
         useResizeObserver(
             document.documentElement,
-            useCallback(() => setScrollbarSize(window.innerHeight - document.documentElement.clientHeight), []),
+            useCallback(() => {
+                const height = window.innerHeight - document.documentElement.clientHeight;
+                const width = window.innerWidth - document.documentElement.clientWidth;
+                const size = type === 'height' ? height : width;
+
+                setScrollbarSize(size);
+            }, []),
         );
 
         return scrollbarSize;
diff --git a/src/screens/Reader.tsx b/src/screens/Reader.tsx
index 38c2b600..dbc7c065 100644
--- a/src/screens/Reader.tsx
+++ b/src/screens/Reader.tsx
@@ -488,7 +488,7 @@ export function Reader() {
         openNextChapter(ChapterOffset.PREV);
     }, [openNextChapter]);
 
-    const scrollbarHeight = MediaQuery.useGetScrollbarSize();
+    const scrollbarHeight = MediaQuery.useGetScrollbarSize('height');
 
     if (isLoading) {
         return (
diff --git a/src/theme.ts b/src/theme.ts
index ac9a2c99..a372e65c 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -19,7 +19,7 @@ import { ThemeMode } from '@/components/context/ThemeModeContext.tsx';
 import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
 import { AppTheme } from '@/lib/ui/AppThemes.ts';
 
-export const SCROLLBAR_SIZE = 14;
+const SCROLLBAR_SIZE = 14;
 
 export const createTheme = (
     themeMode: ThemeMode,