From 871908eba91a8edc97a9719315f4f63cda0976ed Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Wed, 22 May 2024 23:06:17 +0200
Subject: [PATCH] Always show vertical scrollbar on "body" instead of "html"
 element

Due to setting the html elements "y overflow" to "auto" after a manga grid got unmounted (d21521625b71129f38291e1ff6aa918994c3b148), MUIs "scroll lock" of "modals" was broken in the reader.

For some reason the scrollbar does not get locked and instead, due to the added padding, the pages jumped slightly upward.

MUI uses the "body" element to lock the scrollbar, and thus, using this element as well instead of "html" fixes this problem, since the manually set "overflow" value gets overwritten by MUI and thus, won't mess with its logic.
---
 src/components/MangaGrid.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/MangaGrid.tsx b/src/components/MangaGrid.tsx
index f7228628..8de7e512 100644
--- a/src/components/MangaGrid.tsx
+++ b/src/components/MangaGrid.tsx
@@ -273,12 +273,12 @@ export const MangaGrid: React.FC<IMangaGridProps> = ({
         let timeout: NodeJS.Timeout;
         const changeStyle = (timeoutMS: number) => {
             timeout = setTimeout(() => {
-                if (document.documentElement.style.overflow.includes('hidden')) {
+                if (document.body.style.overflow.includes('hidden')) {
                     changeStyle(250);
                     return;
                 }
 
-                document.documentElement.style.overflowY = gridLayout === GridLayout.List ? 'auto' : 'scroll';
+                document.body.style.overflowY = gridLayout === GridLayout.List ? 'auto' : 'scroll';
             }, timeoutMS);
         };
 
@@ -290,7 +290,7 @@ export const MangaGrid: React.FC<IMangaGridProps> = ({
     }, [gridLayout]);
     useEffect(
         () => () => {
-            document.documentElement.style.overflowY = 'auto';
+            document.body.style.overflowY = 'auto';
         },
         [],
     );