feat: errors scroll into view

src/lib/components/modal.svelte

@@ -10,6 +10,7 @@
     export let error: string = null;
     export let closable = true;
 
+    let alert: HTMLElement;
     const dispatch = createEventDispatcher();
     const transitionFly: FlyParams = {
         duration: 150,
@@ -48,6 +49,10 @@
             document.body.classList.remove('u-overflow-hidden');
         }
     }
+
+    $: if (error) {
+        alert?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
+    }
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
@@ -81,14 +86,16 @@
             </header>
             <div class="modal-content">
                 {#if error}
-                    <Alert
-                        dismissible
-                        type="warning"
-                        on:dismiss={() => {
-                            error = null;
-                        }}>
-                        {error}
-                    </Alert>
+                    <div bind:this={alert}>
+                        <Alert
+                            dismissible
+                            type="warning"
+                            on:dismiss={() => {
+                                error = null;
+                            }}>
+                            {error}
+                        </Alert>
+                    </div>
                 {/if}
                 <slot />
             </div>