Prevent scroll on body when search is open (#715)

Co-authored-by: Kevin Zuniga Cuellar <kzunigac@uvm.edu>
Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>
Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com>
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

.changeset/soft-steaks-kick.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+feat: prevent scroll on body when search is open

packages/starlight/components/Search.astro

@@ -72,20 +72,23 @@ const pagefindTranslations = {
 
 			const openModal = (event?: MouseEvent) => {
 				dialog.showModal();
+				document.body.toggleAttribute('data-search-modal-open', true);
 				this.querySelector('input')?.focus();
 				event?.stopPropagation();
 				window.addEventListener('click', onClick);
 			};
 
-			const closeModal = () => {
-				dialog.close();
-				window.removeEventListener('click', onClick);
-			};
+			const closeModal = () => dialog.close();
 
 			openBtn.addEventListener('click', openModal);
 			openBtn.disabled = false;
 			closeBtn.addEventListener('click', closeModal);
 
+			dialog.addEventListener('close', () => {
+				document.body.toggleAttribute('data-search-modal-open', false);
+				window.removeEventListener('click', onClick);
+			});
+
 			// Listen for `/` and `cmd + k` keyboard shortcuts.
 			window.addEventListener('keydown', (e) => {
 				const isInput =
@@ -230,6 +233,10 @@ const pagefindTranslations = {
 </style>
 
 <style is:global>
+	[data-search-modal-open] {
+		overflow: hidden;
+	}
+
 	#starlight__search {
 		--sl-search-result-spacing: calc(1.25rem * var(--pagefind-ui-scale));
 		--sl-search-result-pad-inline-start: calc(3.75rem * var(--pagefind-ui-scale));