polyfill scroll for safari

frontend/package.json

@@ -41,6 +41,7 @@
 		"@fontsource/fira-mono": "^4.5.0",
 		"extract-colors": "^1.1.22",
 		"quantize": "^1.0.2",
+		"scroll-into-view-if-needed": "^2.2.29",
 		"uninstall": "^0.0.0"
 	}
 }

frontend/src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import scrollIntoView from 'scroll-into-view-if-needed'
 
 	import type { ColorsPrompt, ColorsImage } from '$lib/types';
 	import { randomSeed, extractPalette, uploadImage } from '$lib/utils';
@@ -14,7 +15,7 @@
 
 	let promptsData: ColorsPrompt[];
 	let prompt: string;
-	let promptInput: HTMLElement;
+	let promptInputEl: HTMLElement;
 
 	onMount(() => {
 		fetchData();
@@ -153,7 +154,7 @@
 	}
 	function remix(e: CustomEvent) {
 		prompt = e.detail.prompt;
-		promptInput.scrollIntoView({ behavior: 'smooth' });
+		scrollIntoView(promptInputEl, { behavior: 'smooth' });
 	}
 </script>
 
@@ -175,7 +176,7 @@
 	<div class="relative top-0 z-50 bg-white dark:bg-black py-3">
 		<form class="grid grid-cols-6" on:submit|preventDefault={() => generatePalette(prompt)}>
 			<input
-				bind:this={promptInput}
+				bind:this={promptInputEl}
 				class="input"
 				placeholder="A photo of a beautiful sunset in San Francisco"
 				title="Input prompt to generate image and obtain palette"