From 2def829ebf8c5fc0f8a6166f9761856246b5db37 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 21 Mar 2022 13:54:46 +0000
Subject: [PATCH] Tidy up logic for scrolling to components

---
 .../FrontendNavigatePane.svelte               | 31 +++++++++----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
index 3cb99a2003..624146cb8a 100644
--- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
@@ -33,41 +33,40 @@
 
     const sidebarWidth = 259
     const navItemHeight = 32
+    const { scrollLeft, scrollTop, offsetHeight } = scrollRef
 
     let scrollBounds = scrollRef.getBoundingClientRect()
-    let newScrollOffsets = {}
+    let newOffsets = {}
 
     // Calculate left offset
-    const offsetX = bounds.left + bounds.width + scrollRef.scrollLeft + 20
+    const offsetX = bounds.left + bounds.width + scrollLeft + 20
     if (offsetX > sidebarWidth) {
-      newScrollOffsets.left = offsetX - sidebarWidth
+      newOffsets.left = offsetX - sidebarWidth
     } else {
-      newScrollOffsets.left = 0
+      newOffsets.left = 0
     }
-    if (newScrollOffsets.left === scrollRef.scrollLeft) {
-      delete newScrollOffsets.left
+    if (newOffsets.left === scrollLeft) {
+      delete newOffsets.left
     }
 
     // Calculate top offset
-    const offsetY = bounds.top - scrollBounds?.top + scrollRef.scrollTop
-    const upperOffset = 2 * navItemHeight - 8
-    const lowerOffset = navItemHeight + 8
-    if (offsetY > scrollRef.scrollTop + scrollRef.offsetHeight - upperOffset) {
-      newScrollOffsets.top = offsetY - scrollRef.offsetHeight + upperOffset
-    } else if (offsetY < scrollRef.scrollTop + lowerOffset) {
-      newScrollOffsets.top = offsetY - lowerOffset
+    const offsetY = bounds.top - scrollBounds?.top + scrollTop
+    if (offsetY > scrollTop + offsetHeight - 2 * navItemHeight) {
+      newOffsets.top = offsetY - offsetHeight + 2 * navItemHeight
+    } else if (offsetY < scrollTop + navItemHeight) {
+      newOffsets.top = offsetY - navItemHeight
     } else {
-      delete newScrollOffsets.top
+      delete newOffsets.top
     }
 
     // Skip if offset is unchanged
-    if (newScrollOffsets.left == null && newScrollOffsets.top == null) {
+    if (newOffsets.left == null && newOffsets.top == null) {
       return
     }
 
     // Smoothly scroll to the offset
     scrollRef.scroll({
-      ...newScrollOffsets,
+      ...newOffsets,
       behavior: "smooth",
     })
   }