From 9a525ac8fd89743e9c8d4c8f4c96d369af5a9763 Mon Sep 17 00:00:00 2001
From: fabske0 <192151969+fabske0@users.noreply.github.com>
Date: Sat, 14 Jun 2025 05:19:05 +0200
Subject: [PATCH] [UI/UX] Position setting Icons dynamically (#5969)

* position setting icons dynamically

* add comment for potential overlap
---
 src/ui/settings/abstract-control-settings-ui-handler.ts | 9 +++++++--
 src/ui/settings/abstract-settings-ui-handler.ts         | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/ui/settings/abstract-control-settings-ui-handler.ts b/src/ui/settings/abstract-control-settings-ui-handler.ts
index 495a0f68540..e3631c062df 100644
--- a/src/ui/settings/abstract-control-settings-ui-handler.ts
+++ b/src/ui/settings/abstract-control-settings-ui-handler.ts
@@ -126,6 +126,11 @@ export default abstract class AbstractControlSettingsUiHandler extends UiHandler
     );
     this.actionsBg.setOrigin(0, 0);
 
+    /*
+     * If there isn't enough space to fit all the icons and texts, there will be an overlap
+     * This currently doesn't happen, but it's something to keep in mind.
+     */
+
     const iconAction = globalScene.add.sprite(0, 0, "keyboard");
     iconAction.setOrigin(0, -0.1);
     iconAction.setPositionRelative(this.actionsBg, this.navigationContainer.width - 32, 4);
@@ -137,7 +142,7 @@ export default abstract class AbstractControlSettingsUiHandler extends UiHandler
 
     const iconCancel = globalScene.add.sprite(0, 0, "keyboard");
     iconCancel.setOrigin(0, -0.1);
-    iconCancel.setPositionRelative(this.actionsBg, this.navigationContainer.width - 100, 4);
+    iconCancel.setPositionRelative(this.actionsBg, actionText.x - 28, 4);
     this.navigationIcons["BUTTON_CANCEL"] = iconCancel;
 
     const cancelText = addTextObject(0, 0, i18next.t("settings:back"), TextStyle.SETTINGS_LABEL);
@@ -146,7 +151,7 @@ export default abstract class AbstractControlSettingsUiHandler extends UiHandler
 
     const iconReset = globalScene.add.sprite(0, 0, "keyboard");
     iconReset.setOrigin(0, -0.1);
-    iconReset.setPositionRelative(this.actionsBg, this.navigationContainer.width - 180, 4);
+    iconReset.setPositionRelative(this.actionsBg, cancelText.x - 28, 4);
     this.navigationIcons["BUTTON_HOME"] = iconReset;
 
     const resetText = addTextObject(0, 0, i18next.t("settings:reset"), TextStyle.SETTINGS_LABEL);
diff --git a/src/ui/settings/abstract-settings-ui-handler.ts b/src/ui/settings/abstract-settings-ui-handler.ts
index 1fb4b6d34dc..a621b056e28 100644
--- a/src/ui/settings/abstract-settings-ui-handler.ts
+++ b/src/ui/settings/abstract-settings-ui-handler.ts
@@ -94,7 +94,7 @@ export default class AbstractSettingsUiHandler extends MessageUiHandler {
 
     const iconCancel = globalScene.add.sprite(0, 0, "keyboard");
     iconCancel.setOrigin(0, -0.1);
-    iconCancel.setPositionRelative(actionsBg, this.navigationContainer.width - 100, 4);
+    iconCancel.setPositionRelative(actionsBg, actionText.x - 28, 4);
     this.navigationIcons["BUTTON_CANCEL"] = iconCancel;
 
     const cancelText = addTextObject(0, 0, i18next.t("settings:back"), TextStyle.SETTINGS_LABEL);