From de6e0e4ee808dc05cf887e6b2f8c0e99f27c6646 Mon Sep 17 00:00:00 2001
From: Florian Pichler <fp@ylk.gd>
Date: Mon, 4 Aug 2025 18:53:40 +0200
Subject: [PATCH 1/7] Add missing title to "Select element" icon

---
 app/components/component-tree-toolbar.hbs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/component-tree-toolbar.hbs b/app/components/component-tree-toolbar.hbs
index 931a90be61..c18761403d 100644
--- a/app/components/component-tree-toolbar.hbs
+++ b/app/components/component-tree-toolbar.hbs
@@ -2,6 +2,7 @@
   <button
     class="{{if @isInspecting "active"}} toolbar-icon-button"
     type="button"
+    title="Select element"
     {{on "click" @toggleInspect}}
   >
     {{svg-jar "inspect" width="16px" height="17px"}}

From 67d468b4b76f4749f0951b61cab37b7e498f7993 Mon Sep 17 00:00:00 2001
From: Florian Pichler <fp@ylk.gd>
Date: Mon, 4 Aug 2025 16:15:33 +0200
Subject: [PATCH 2/7] Extract itemIndent calculation into arrow function

---
 app/components/render-item.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/components/render-item.ts b/app/components/render-item.ts
index 5cc881749e..669d8609d6 100644
--- a/app/components/render-item.ts
+++ b/app/components/render-item.ts
@@ -13,6 +13,8 @@ interface RenderItemArgs {
   target: { level: number };
 }
 
+export const indentItem = (level: number) => +level * 20 + 5;
+
 export default class RenderItem extends Component<RenderItemArgs> {
   get hasChildren() {
     return Number(this.args.model?.children?.length) > 0;
@@ -25,7 +27,7 @@ export default class RenderItem extends Component<RenderItemArgs> {
   }
 
   get nameStyle() {
-    return htmlSafe(`padding-left: ${+this.level * 20 + 5}px;`);
+    return htmlSafe(`padding-left: ${indentItem(this.level)}px;`);
   }
 
   get nodeStyle() {

From 576e76fbfcc48cb2abed21c1864e4878d5c61f3e Mon Sep 17 00:00:00 2001
From: Florian Pichler <fp@ylk.gd>
Date: Mon, 4 Aug 2025 18:51:34 +0200
Subject: [PATCH 3/7] Refactor height fallback

---
 app/components/scroll-container.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/components/scroll-container.js b/app/components/scroll-container.js
index 2208b11684..f82306ee4f 100644
--- a/app/components/scroll-container.js
+++ b/app/components/scroll-container.js
@@ -31,14 +31,16 @@ export default class ScrollContainerComponent extends Component {
     if (index === -1) {
       return htmlSafe('display: none;');
     } else {
+      const height = itemHeight ?? 0;
+
       return htmlSafe(`
         position: absolute;
         width: 100%;
-        height: ${itemHeight || 0}px;
+        height: ${height}px;
         margin: 0px;
         padding: 0px;
-        top: ${index * itemHeight || 0}px;
         left: 0px;
+        top: ${index * height}px;
         z-index: -9999;
         pointer-events: none;
       `);

From ddfd53dfa738e6d5773847e4a530f1e48c52e546 Mon Sep 17 00:00:00 2001
From: Florian Pichler <fp@ylk.gd>
Date: Mon, 4 Aug 2025 18:53:19 +0200
Subject: [PATCH 4/7] Update scroll container to also scroll vertically when an
 item is focussed

---
 app/components/scroll-container.js | 32 +++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/app/components/scroll-container.js b/app/components/scroll-container.js
index f82306ee4f..478aa9d8e9 100644
--- a/app/components/scroll-container.js
+++ b/app/components/scroll-container.js
@@ -5,6 +5,7 @@ import { action } from '@ember/object';
 import { debounce } from '@ember/runloop';
 import { htmlSafe } from '@ember/template';
 import { tracked } from '@glimmer/tracking';
+import { indentItem } from './render-item';
 
 export default class ScrollContainerComponent extends Component {
   attributeBindings = ['style'];
@@ -26,11 +27,13 @@ export default class ScrollContainerComponent extends Component {
   }
 
   get scrollTargetStyle() {
-    let { index, itemHeight } = this;
+    let { index, itemHeight, previewing, currentItem } = this;
 
     if (index === -1) {
       return htmlSafe('display: none;');
     } else {
+      const level = previewing?.level ?? currentItem?.level ?? 0;
+      const left = indentItem(level) + 10;
       const height = itemHeight ?? 0;
 
       return htmlSafe(`
@@ -39,8 +42,8 @@ export default class ScrollContainerComponent extends Component {
         height: ${height}px;
         margin: 0px;
         padding: 0px;
-        left: 0px;
         top: ${index * height}px;
+        left: ${left}px;
         z-index: -9999;
         pointer-events: none;
       `);
@@ -98,10 +101,25 @@ export default class ScrollContainerComponent extends Component {
 }
 
 function needsScroll(container, target) {
-  if (!container || !target) return false;
+  if (!container || !target) {
+    return false;
+  }
 
-  let { top: containerTop, bottom: containerBottom } =
-    container.getBoundingClientRect();
-  let { top: targetTop, bottom: targetBottom } = target.getBoundingClientRect();
-  return targetTop < containerTop || targetBottom > containerBottom;
+  let {
+    top: containerTop,
+    bottom: containerBottom,
+    left: containerLeft,
+  } = container.getBoundingClientRect();
+
+  let {
+    top: targetTop,
+    bottom: targetBottom,
+    left: targetLeft,
+  } = target.getBoundingClientRect();
+
+  return (
+    targetTop < containerTop ||
+    targetBottom > containerBottom ||
+    targetLeft > containerLeft
+  );
 }

From 080acfc30e0cf5a380e265eef48eaba7e15696bb Mon Sep 17 00:00:00 2001
From: Florian Pichler <fp@ylk.gd>
Date: Wed, 6 Aug 2025 15:04:58 +0200
Subject: [PATCH 5/7] Only scroll when focussing an item not on hover

---
 app/components/scroll-container.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/scroll-container.js b/app/components/scroll-container.js
index 478aa9d8e9..00983b0e2b 100644
--- a/app/components/scroll-container.js
+++ b/app/components/scroll-container.js
@@ -27,12 +27,12 @@ export default class ScrollContainerComponent extends Component {
   }
 
   get scrollTargetStyle() {
-    let { index, itemHeight, previewing, currentItem } = this;
+    let { index, itemHeight, currentItem } = this;
 
     if (index === -1) {
       return htmlSafe('display: none;');
     } else {
-      const level = previewing?.level ?? currentItem?.level ?? 0;
+      const level = currentItem?.level ?? 0;
       const left = indentItem(level) + 10;
       const height = itemHeight ?? 0;
 

From a688d7a283ee398e848a326110033718a6770ab1 Mon Sep 17 00:00:00 2001
From: Florian Pichler <fp@ylk.gd>
Date: Tue, 26 Aug 2025 17:06:59 +0200
Subject: [PATCH 6/7] Fix scroll left behavior

---
 app/components/scroll-container.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/scroll-container.js b/app/components/scroll-container.js
index 00983b0e2b..7a505248a1 100644
--- a/app/components/scroll-container.js
+++ b/app/components/scroll-container.js
@@ -27,13 +27,13 @@ export default class ScrollContainerComponent extends Component {
   }
 
   get scrollTargetStyle() {
-    let { index, itemHeight, currentItem } = this;
+    let { index, itemHeight, currentItem, previewing } = this;
 
     if (index === -1) {
       return htmlSafe('display: none;');
     } else {
       const level = currentItem?.level ?? 0;
-      const left = indentItem(level) + 10;
+      const left = indentItem(level);
       const height = itemHeight ?? 0;
 
       return htmlSafe(`
@@ -43,7 +43,7 @@ export default class ScrollContainerComponent extends Component {
         margin: 0px;
         padding: 0px;
         top: ${index * height}px;
-        left: ${left}px;
+        ${previewing ? '' : `left: ${left}px;`}
         z-index: -9999;
         pointer-events: none;
       `);
@@ -120,6 +120,6 @@ function needsScroll(container, target) {
   return (
     targetTop < containerTop ||
     targetBottom > containerBottom ||
-    targetLeft > containerLeft
+    targetLeft != containerLeft
   );
 }

From 039500f0ecf9d839e6d2c0ddb995356e3c0ee435 Mon Sep 17 00:00:00 2001
From: Florian Pichler <fp@ylk.gd>
Date: Tue, 26 Aug 2025 17:07:21 +0200
Subject: [PATCH 7/7] Use smooth scrolling to make the change in position less
 jarring

---
 app/components/scroll-container.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/scroll-container.js b/app/components/scroll-container.js
index 7a505248a1..01a594a9f3 100644
--- a/app/components/scroll-container.js
+++ b/app/components/scroll-container.js
@@ -92,7 +92,7 @@ export default class ScrollContainerComponent extends Component {
 
     if (needsScroll(element, scrollTarget)) {
       scrollTarget.scrollIntoView({
-        behavior: 'auto',
+        behavior: 'smooth',
         block: 'nearest',
         inline: 'nearest',
       });