From 8c1fc2031151ab3ac763e367bb6c087aa25734f2 Mon Sep 17 00:00:00 2001
From: Martin Raifer <martin@raifer.tech>
Date: Fri, 10 Jan 2025 16:01:17 +0100
Subject: [PATCH] walkthrough: use left/right tooltips if the anchor is close
 to the left/right edge of the screen

closes #10634

This happens for example when the tooltip are rendered for the map controlls (right or left edge of the screen depending on user locale): If the anchor is close to the bottom of the screen, the tooltip would be placed not ideally in the corner and hard to read. It is solved by falling back to left/right tooltips with a potentially offset arrow in these cases
---
 CHANGELOG.md          | 3 ++-
 modules/ui/curtain.js | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4655ff22c..1344b2ef8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -54,7 +54,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 * Add Ladin (language code `lld`) as an available option for multilingual names
 #### :hourglass: Performance
 #### :mortar_board: Walkthrough / Help
-* Fix walkthrough from showing tooltips on wrong location under certain circumstances ([#10650], [#10624])
+* Fix walkthrough from showing tooltips on wrong location under certain circumstances ([#10650], [#10624], [#10634])
 #### :rocket: Presets
 #### :hammer: Development
 * Migrate unit tests from karma to vitest ([#10452])
@@ -68,6 +68,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 [#10508]: https://github.com/openstreetmap/iD/pull/10508
 [#10594]: https://github.com/openstreetmap/iD/pull/10594
 [#10624]: https://github.com/openstreetmap/iD/issues/10624
+[#10634]: https://github.com/openstreetmap/iD/issues/10634
 [#10650]: https://github.com/openstreetmap/iD/issues/10650
 [@winstonsung]: https://github.com/winstonsung/
 [@Nekzuris]: https://github.com/Nekzuris
diff --git a/modules/ui/curtain.js b/modules/ui/curtain.js
index cb90b1c59..3429274e5 100644
--- a/modules/ui/curtain.js
+++ b/modules/ui/curtain.js
@@ -160,8 +160,8 @@ export function uiCurtain(containerNode) {
             }
 
             // determine tooltip placement..
-
-            if (tooltipBox.top + tooltipBox.height < 100) {
+            const onLeftOrRightEdge = tooltipBox.left + tooltipBox.width / 2 > w - 100 || tooltipBox.left + tooltipBox.width / 2 < 100;
+            if (tooltipBox.top + tooltipBox.height < 100 && !onLeftOrRightEdge) {
                 // tooltip below box..
                 side = 'bottom';
                 pos = [
@@ -169,7 +169,7 @@ export function uiCurtain(containerNode) {
                     tooltipBox.top + tooltipBox.height
                 ];
 
-            } else if (tooltipBox.top > h - 140) {
+            } else if (tooltipBox.top > h - 140 && !onLeftOrRightEdge) {
                 // tooltip above box..
                 side = 'top';
                 pos = [