fix: prevent layout shift behind command+k search (#563)

kaevupoiss · web-flow · commit 8788302ea3ef · 2024-10-23T18:07:44.000+02:00
diff --git 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
@@ -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 = '';
 	}
 });
