From ff47e8acd3dfa3ddabaf48d99464b3e4a55be7fd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 17 May 2022 14:10:21 +0100
Subject: [PATCH] Scroll to the selected component inside the app preview

---
 packages/client/src/components/Component.svelte | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 4c1fe69258..7a9a5cfb08 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -136,6 +136,9 @@
   // Determine and apply settings to the component
   $: applySettings(staticSettings, enrichedSettings, conditionalSettings)
 
+  // Scroll the selected element into view
+  $: selected && scrollIntoView()
+
   // Update component context
   $: store.set({
     id,
@@ -374,6 +377,19 @@
     }
   }
 
+  const scrollIntoView = () => {
+    const node = document.getElementsByClassName(id)?.[0]?.childNodes[0]
+    if (!node) {
+      return
+    }
+    node.style.scrollMargin = "80px"
+    node.scrollIntoView({
+      behavior: "smooth",
+      block: "start",
+      inline: "start",
+    })
+  }
+
   onMount(() => {
     if (
       $appStore.isDevApp &&