Always use calculated scrollbar size

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

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,

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;

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 (

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,