nikon/docsearch
1
0
Fork 0
Code Activity Actions

fix: size and background scroll fixes (#2603)

Browse source 
* 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>
This commit is contained in:
Xavier Ruiz 2025-06-25 09:21:13 -04:00 committed by GitHub
parent ba5bdd8a84
commit fe03b8e04e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/docsearch-css/src/modal.css
View file

@ -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%;