From 5d43f42aed57ded224802b33f0d4a52c2c7ac585 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 7 Sep 2022 16:14:35 +0200
Subject: [PATCH] feat: errors scroll into view

---
 src/lib/components/modal.svelte | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 05da1e24f..8a85e526b 100644
--- a/src/lib/components/modal.svelte
+++ b/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>