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

@@ -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

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 = [