From 0980fa5e6988f35ef3cb2ccc38f593e9c3221466 Mon Sep 17 00:00:00 2001
From: Tony <legendmastertony@gmail.com>
Date: Sun, 23 Apr 2023 01:05:04 +0800
Subject: [PATCH 1/2] fix: modal layout shift for none overlay scrollbar

---
 packages/docsearch-css/src/modal.css            |  7 +++++++
 packages/docsearch-react/src/DocSearchModal.tsx | 12 ++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/docsearch-css/src/modal.css b/packages/docsearch-css/src/modal.css
index 3aa46e191..e72213ca5 100644
--- a/packages/docsearch-css/src/modal.css
+++ b/packages/docsearch-css/src/modal.css
@@ -6,6 +6,13 @@
    * `style` attribute (e.g. Docusaurus).
    */
   overflow: hidden !important;
+
+  overflow-y: scroll !important;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  /* Set top from js */
 }
 
 /* Container & Modal */
diff --git a/packages/docsearch-react/src/DocSearchModal.tsx b/packages/docsearch-react/src/DocSearchModal.tsx
index b76edd631..0193ba465 100644
--- a/packages/docsearch-react/src/DocSearchModal.tsx
+++ b/packages/docsearch-react/src/DocSearchModal.tsx
@@ -318,10 +318,18 @@ export function DocSearchModal({
   useTrapFocus({ container: containerRef.current });
 
   React.useEffect(() => {
-    document.body.classList.add('DocSearch--active');
+    const hasVerticalScrollbar =
+      window.innerWidth > document.documentElement.clientWidth;
+    if (hasVerticalScrollbar) {
+      document.body.classList.add('DocSearch--active');
+      document.body.style.top = `-${initialScrollY}px`;
+    }
 
     return () => {
-      document.body.classList.remove('DocSearch--active');
+      if (hasVerticalScrollbar) {
+        document.body.classList.remove('DocSearch--active');
+        document.body.style.top = '';
+      }
 
       // IE11 doesn't support `scrollTo` so we check that the method exists
       // first.

From 4b64eccb3a2dd0ba61ccee822e1d465cb18f81f2 Mon Sep 17 00:00:00 2001
From: Tony <legendmastertony@gmail.com>
Date: Sun, 23 Apr 2023 01:51:43 +0800
Subject: [PATCH 2/2] refactor: split fix scrollbar to it's own class

---
 packages/docsearch-css/src/modal.css            | 3 +++
 packages/docsearch-react/src/DocSearchModal.tsx | 6 ++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/docsearch-css/src/modal.css b/packages/docsearch-css/src/modal.css
index e72213ca5..4d1637251 100644
--- a/packages/docsearch-css/src/modal.css
+++ b/packages/docsearch-css/src/modal.css
@@ -7,6 +7,9 @@
    */
   overflow: hidden !important;
 
+}
+
+.DocSearch--active.DocSearch-fix-scrollbar {
   overflow-y: scroll !important;
   position: fixed;
   left: 0;
diff --git a/packages/docsearch-react/src/DocSearchModal.tsx b/packages/docsearch-react/src/DocSearchModal.tsx
index 0193ba465..276b4e6ff 100644
--- a/packages/docsearch-react/src/DocSearchModal.tsx
+++ b/packages/docsearch-react/src/DocSearchModal.tsx
@@ -321,15 +321,17 @@ export function DocSearchModal({
     const hasVerticalScrollbar =
       window.innerWidth > document.documentElement.clientWidth;
     if (hasVerticalScrollbar) {
-      document.body.classList.add('DocSearch--active');
+      document.body.classList.add('DocSearch-fix-scrollbar');
       document.body.style.top = `-${initialScrollY}px`;
     }
+    document.body.classList.add('DocSearch--active');
 
     return () => {
       if (hasVerticalScrollbar) {
-        document.body.classList.remove('DocSearch--active');
+        document.body.classList.remove('DocSearch-fix-scrollbar');
         document.body.style.top = '';
       }
+      document.body.classList.remove('DocSearch--active');
 
       // IE11 doesn't support `scrollTo` so we check that the method exists
       // first.