From ddafab088a142f85f6147f492632c480a5a27822 Mon Sep 17 00:00:00 2001
From: Rasmus Talioja <rasmus.talioja@gmail.com>
Date: Wed, 23 Oct 2024 09:32:24 +0300
Subject: [PATCH] Replace fixed with absolute

---
 packages/site-kit/src/lib/search/SearchBox.svelte | 11 +++++------
 packages/site-kit/src/lib/stores/nav.ts           |  2 ++
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 75ac7c24f5..09b21e06c3 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -26,6 +26,8 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	let search: any = $state(null);
 	let recent_searches: any[] = $state([]);
 
+	let last_scroll_position: number | null = null;
+
 	let worker: Worker;
 	let ready = $state(false);
 
@@ -68,9 +70,9 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	async function close() {
 		if ($searching) {
 			$searching = false;
-			const scroll = -parseInt(document.body.style.top || '0');
+			const scroll = last_scroll_position || 0;
+			last_scroll_position = null;
 			document.body.style.position = '';
-			document.body.style.top = '';
 			document.body.tabIndex = -1;
 			document.body.focus();
 			document.body.removeAttribute('tabindex');
@@ -108,10 +110,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 
 	$effect(() => {
 		if ($searching) {
-			document.body.style.top = `-${window.scrollY}px`;
-			document.body.style.position = 'fixed';
-
-			$overlay_open = true;
+			last_scroll_position = window.scrollY;
 		}
 	});
 </script>
diff --git a/packages/site-kit/src/lib/stores/nav.ts b/packages/site-kit/src/lib/stores/nav.ts
index 57056fb703..45f409e9e6 100644
--- a/packages/site-kit/src/lib/stores/nav.ts
+++ b/packages/site-kit/src/lib/stores/nav.ts
@@ -14,8 +14,10 @@ overlay_open.subscribe((value) => {
 	if (value) {
 		// Disable root from scrolling
 		document.documentElement.style.overflow = 'hidden';
+		document.documentElement.style.scrollbarGutter = 'stable';
 	} else {
 		// Enable root to scroll
 		document.documentElement.style.overflow = '';
+		document.documentElement.style.scrollbarGutter = '';
 	}
 });