From 7ec1b02c9962851f5a76f6dbda69a9c4db1c3a1b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 14 Jun 2022 14:32:17 +0100
Subject: [PATCH] Scroll the highlighted element into view

---
 .../design/AppPreview/CurrentItemPreview.svelte        | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index 7187d9f157..706550cca7 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -192,6 +192,16 @@
         }
       } else if (type === "highlight-setting") {
         store.actions.settings.highlight(data.setting)
+
+        // Also scroll setting into view
+        const selector = `[data-cy="${data.setting}-prop-control"`
+        const element = document.querySelector(selector)?.parentElement
+        if (element) {
+          element.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+          })
+        }
       } else {
         console.warn(`Client sent unknown event type: ${type}`)
       }