From b5e66300ab12b5cd2237ebf9e16ac91489692662 Mon Sep 17 00:00:00 2001
From: Mateusz Russak <mateusz@russak.biz>
Date: Thu, 29 Feb 2024 11:09:18 +0100
Subject: [PATCH 1/5] fix: shortcuts visibility problem

---
 ui/src/builder/BuilderInstanceTracker.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/ui/src/builder/BuilderInstanceTracker.vue b/ui/src/builder/BuilderInstanceTracker.vue
index 3956e6913..802a28365 100644
--- a/ui/src/builder/BuilderInstanceTracker.vue
+++ b/ui/src/builder/BuilderInstanceTracker.vue
@@ -6,6 +6,11 @@
 <script setup lang="ts">
 import { nextTick, onMounted, onUnmounted, Ref, ref, toRefs } from "vue";
 
+import { inject } from "vue";
+import injectionKeys from "../injectionKeys";
+
+const ssbm = inject(injectionKeys.builderManager);
+
 const REFRESH_INTERVAL_MS = 200;
 
 interface Props {
@@ -45,10 +50,14 @@ const trackElement = (el: HTMLElement) => {
 	let trackerX = elX;
 	let trackerY = elY + yAdjustment;
 
+	let settingsWidth = ssbm.isSettingsBarCollapsed()
+		? 0
+		: document.getElementsByClassName("BuilderSettings")[0].clientWidth;
+
 	if (!isOffBoundsAllowed.value) {
 		trackerX = Math.max(rendererX, trackerX); // Left boundary
 		trackerX = Math.min(
-			rendererX + rendererWidth - contentsWidth,
+			rendererX + rendererWidth - contentsWidth - settingsWidth,
 			trackerX,
 		); // Right boundary
 		trackerY = Math.max(MIN_TOP_PX, trackerY); // Top boundary

From 5cb53945717cc78d019c58e0812535d18e587d3a Mon Sep 17 00:00:00 2001
From: Mateusz Russak <mateusz@russak.biz>
Date: Thu, 29 Feb 2024 11:11:36 +0100
Subject: [PATCH 2/5] chore: simplified

---
 ui/src/builder/BuilderInstanceTracker.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/ui/src/builder/BuilderInstanceTracker.vue b/ui/src/builder/BuilderInstanceTracker.vue
index 802a28365..8a5aded0d 100644
--- a/ui/src/builder/BuilderInstanceTracker.vue
+++ b/ui/src/builder/BuilderInstanceTracker.vue
@@ -6,11 +6,6 @@
 <script setup lang="ts">
 import { nextTick, onMounted, onUnmounted, Ref, ref, toRefs } from "vue";
 
-import { inject } from "vue";
-import injectionKeys from "../injectionKeys";
-
-const ssbm = inject(injectionKeys.builderManager);
-
 const REFRESH_INTERVAL_MS = 200;
 
 interface Props {
@@ -50,9 +45,7 @@ const trackElement = (el: HTMLElement) => {
 	let trackerX = elX;
 	let trackerY = elY + yAdjustment;
 
-	let settingsWidth = ssbm.isSettingsBarCollapsed()
-		? 0
-		: document.getElementsByClassName("BuilderSettings")[0].clientWidth;
+	let settingsWidth = document.getElementsByClassName("BuilderSettings")[0].clientWidth;
 
 	if (!isOffBoundsAllowed.value) {
 		trackerX = Math.max(rendererX, trackerX); // Left boundary

From ddd289b58b546befde6f6f7f6e465faa1702a778 Mon Sep 17 00:00:00 2001
From: Mateusz Russak <mateusz@russak.biz>
Date: Thu, 29 Feb 2024 11:27:00 +0100
Subject: [PATCH 3/5] chore: bulletproofing the shortcuts width calculation

---
 ui/src/builder/BuilderInstanceTracker.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/src/builder/BuilderInstanceTracker.vue b/ui/src/builder/BuilderInstanceTracker.vue
index 8a5aded0d..bb6fedcb3 100644
--- a/ui/src/builder/BuilderInstanceTracker.vue
+++ b/ui/src/builder/BuilderInstanceTracker.vue
@@ -45,7 +45,9 @@ const trackElement = (el: HTMLElement) => {
 	let trackerX = elX;
 	let trackerY = elY + yAdjustment;
 
-	let settingsWidth = document.getElementsByClassName("BuilderSettings")[0].clientWidth;
+	let settingsWidth =
+		document.getElementsByClassName("BuilderSettings")?.[0]?.clientWidth ||
+		0;
 
 	if (!isOffBoundsAllowed.value) {
 		trackerX = Math.max(rendererX, trackerX); // Left boundary

From f689fb795c9509bdf5da0dd2eea7c74332f55894 Mon Sep 17 00:00:00 2001
From: Mateusz Russak <mateusz@russak.biz>
Date: Thu, 29 Feb 2024 13:10:52 +0100
Subject: [PATCH 4/5] chore: fixes according to the review

---
 ui/src/builder/BuilderInstanceTracker.vue | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/ui/src/builder/BuilderInstanceTracker.vue b/ui/src/builder/BuilderInstanceTracker.vue
index bb6fedcb3..a77ee0da8 100644
--- a/ui/src/builder/BuilderInstanceTracker.vue
+++ b/ui/src/builder/BuilderInstanceTracker.vue
@@ -36,6 +36,11 @@ const trackElement = (el: HTMLElement) => {
 	const { clientHeight: bodyHeight } = document.body;
 	const { clientWidth: rendererWidth } = rendererEl;
 	const { left: rendererX } = rendererEl.getBoundingClientRect();
+	const settingsEl = document.querySelector(".BuilderSettings");
+	const { clientWidth: settingsWidth } = settingsEl || { clientWidth: 0 };
+	const { left: settingsLeft } = settingsEl?.getBoundingClientRect() || {
+		left: Infinity,
+	};
 	let { clientHeight: contentsHeight, clientWidth: contentsWidth } =
 		matchSize?.value ? el : rootEl.value;
 	let yAdjustment = verticalOffsetPixels?.value
@@ -45,20 +50,27 @@ const trackElement = (el: HTMLElement) => {
 	let trackerX = elX;
 	let trackerY = elY + yAdjustment;
 
-	let settingsWidth =
-		document.getElementsByClassName("BuilderSettings")?.[0]?.clientWidth ||
-		0;
-
 	if (!isOffBoundsAllowed.value) {
 		trackerX = Math.max(rendererX, trackerX); // Left boundary
 		trackerX = Math.min(
-			rendererX + rendererWidth - contentsWidth - settingsWidth,
+			rendererX + rendererWidth - contentsWidth,
+
 			trackerX,
 		); // Right boundary
 		trackerY = Math.max(MIN_TOP_PX, trackerY); // Top boundary
 		trackerY = Math.min(bodyHeight - contentsHeight, trackerY); // Bottom boundary
 	}
 
+	let correction = 0;
+	if (settingsLeft < rendererX + rendererWidth) {
+		const trackerEnd = trackerX + contentsWidth;
+		const rendererEnd = rendererX + rendererWidth;
+		const distanceToRight = Math.max( rendererEnd - trackerEnd, 0)
+		correction = Math.max(settingsWidth - distanceToRight, 0);
+	}
+
+	trackerX -= correction;
+
 	rootStyle.value = {
 		top: `${trackerY}px`,
 		left: `${trackerX}px`,

From 1f221eafa4371d87c048b33de2cac4b4503fe13e Mon Sep 17 00:00:00 2001
From: Mateusz Russak <mateusz@russak.biz>
Date: Thu, 29 Feb 2024 16:08:06 +0100
Subject: [PATCH 5/5] chore: fixed linter error

---
 ui/src/builder/BuilderInstanceTracker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/builder/BuilderInstanceTracker.vue b/ui/src/builder/BuilderInstanceTracker.vue
index a77ee0da8..7855e1f2c 100644
--- a/ui/src/builder/BuilderInstanceTracker.vue
+++ b/ui/src/builder/BuilderInstanceTracker.vue
@@ -65,7 +65,7 @@ const trackElement = (el: HTMLElement) => {
 	if (settingsLeft < rendererX + rendererWidth) {
 		const trackerEnd = trackerX + contentsWidth;
 		const rendererEnd = rendererX + rendererWidth;
-		const distanceToRight = Math.max( rendererEnd - trackerEnd, 0)
+		const distanceToRight = Math.max(rendererEnd - trackerEnd, 0);
 		correction = Math.max(settingsWidth - distanceToRight, 0);
 	}