From fe03b8e04e71b328837bb6f0461a0ca0949cf171 Mon Sep 17 00:00:00 2001
From: Xavier Ruiz <github@xav.ie>
Date: Wed, 25 Jun 2025 09:21:13 -0400
Subject: [PATCH] fix: size and background scroll fixes (#2603)

* fix(docsearch-css): use correct size and position

`position: absolute` makes the element absolute relative to its parent
If the parent is not sized/positioned as desired, then the children
suffer. `position: fixed` makes this element no longer depend on parent
positioning.

The height units are changed to more reliable/modern units to get the
desired behavior.

* fix(docksearch-css): prevent mobile body scrolling

On initial modal open, the body is scrollable. Prevent this as suggested
on SO

---------

Co-authored-by: Dylan Tientcheu <dylantientcheu@gmail.com>
---
 packages/docsearch-css/src/modal.css | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/docsearch-css/src/modal.css b/packages/docsearch-css/src/modal.css
index e4208564..808f7bb4 100644
--- a/packages/docsearch-css/src/modal.css
+++ b/packages/docsearch-css/src/modal.css
@@ -570,16 +570,20 @@ assistive tech users */
     --docsearch-spacing: 10px;
     --docsearch-footer-height: 40px;
   }
+  /* Prevent body scroll on modal-open for mobile */
+  /* https://stackoverflow.com/a/24727206/6276948 */
+  body:has(.DocSearch-Container) {
+    overflow: hidden;
+    position: fixed;
+  }
 
   .DocSearch-Dropdown {
     height: 100%;
   }
 
   .DocSearch-Container {
-    height: 100vh;
-    height: -webkit-fill-available;
     height: calc(var(--docsearch-vh, 1vh) * 100);
-    position: absolute;
+    height: 100dvh;
   }
 
   .DocSearch-Footer {
@@ -597,9 +601,8 @@ assistive tech users */
   .DocSearch-Modal {
     border-radius: 0;
     box-shadow: none;
-    height: 100vh;
-    height: -webkit-fill-available;
     height: calc(var(--docsearch-vh, 1vh) * 100);
+    height: 100dvh;
     margin: 0;
     max-width: 100%;
     width: 100%;