From d21521625b71129f38291e1ff6aa918994c3b148 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 20 May 2024 17:42:37 +0200
Subject: [PATCH] Always show vertical scrollbar while manga grid is rendered

To prevent jittering (https://github.com/Suwayomi/Suwayomi-WebUI/issues/758) caused by react-virtuoso
---
 src/components/MangaGrid.tsx | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/src/components/MangaGrid.tsx b/src/components/MangaGrid.tsx
index 2f6cca07..f7228628 100644
--- a/src/components/MangaGrid.tsx
+++ b/src/components/MangaGrid.tsx
@@ -266,6 +266,35 @@ export const MangaGrid: React.FC<IMangaGridProps> = ({
 
     useLayoutEffect(updateGridWidth, []);
 
+    // always show vertical scrollbar to prevent https://github.com/Suwayomi/Suwayomi-WebUI/issues/758
+    useLayoutEffect(() => {
+        // in case "overflow" is currently set to "hidden" that (most likely) means that a MUI modal is open and locks the scrollbar
+        // once this modal is closed MUI restores the previous "overflow" value, thus, reverting the just set "overflow" value
+        let timeout: NodeJS.Timeout;
+        const changeStyle = (timeoutMS: number) => {
+            timeout = setTimeout(() => {
+                if (document.documentElement.style.overflow.includes('hidden')) {
+                    changeStyle(250);
+                    return;
+                }
+
+                document.documentElement.style.overflowY = gridLayout === GridLayout.List ? 'auto' : 'scroll';
+            }, timeoutMS);
+        };
+
+        changeStyle(0);
+
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [gridLayout]);
+    useEffect(
+        () => () => {
+            document.documentElement.style.overflowY = 'auto';
+        },
+        [],
+    );
+
     useEffect(() => {
         let movementTimer: NodeJS.Timeout;