From a30856eb832fa077dcd3a4459ea25a12dcb58e39 Mon Sep 17 00:00:00 2001
From: Martin Raifer <martin@raifer.tech>
Date: Fri, 5 Nov 2021 11:41:23 +0100
Subject: [PATCH] fix clipped tooltips on controls bar (#8791)

* controls: add wrapper div to not clip tooltips

* bind wheel to controlsWrap
minor z-index change

* scrollbar for ie/firefox

Co-authored-by: Milos Brzakovic (E-Search) <mbrzakovic@microsoft.com>
---
 css/80_app.css     | 22 ++++++++++++++++------
 modules/ui/init.js | 10 +++++++---
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 452fd224a..aa95d36cd 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -2953,22 +2953,32 @@ img.tag-reference-wiki-image {
 
 /* Map Controls
 ------------------------------------------------------- */
+.map-controls-wrap {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 100%;
+    z-index: 100;
+    display: block;
+    overflow-x: hidden;
+    overflow-y: auto;
+    pointer-events: none;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+.map-controls-wrap::-webkit-scrollbar {
+    display: none;
+}
 .map-controls {
     right: 0;
     top: 0;
     width: 40px;
     position: absolute;
-    z-index: 100;
     bottom: 0;
     display: flex;
     flex-direction: column;
     padding: 5px 0;
     pointer-events: none;
-    overflow-x: hidden;
-    overflow-y: auto;
-}
-.map-controls::-webkit-scrollbar {
-    display: none;
 }
 .map-controls:before {
     content: '';
diff --git a/modules/ui/init.js b/modules/ui/init.js
index 5c3d626f6..9a6470397 100644
--- a/modules/ui/init.js
+++ b/modules/ui/init.js
@@ -182,7 +182,11 @@ export function uiInit(context) {
             .call(uiSpinner(context));
 
         // Map controls
-        var controls = overMap
+        var controlsWrap = overMap
+            .append('div')
+            .attr('class', 'map-controls-wrap');
+
+        var controls = controlsWrap
             .append('div')
             .attr('class', 'map-controls');
 
@@ -201,9 +205,9 @@ export function uiInit(context) {
             .attr('class', 'map-control geolocate-control')
             .call(uiGeolocate(context));
 
-        controls.on('wheel.mapControls', function(d3_event) {
+        controlsWrap.on('wheel.mapControls', function(d3_event) {
             if (!d3_event.deltaX) {
-                controls.node().scrollTop += d3_event.deltaY;
+                controlsWrap.node().scrollTop += d3_event.deltaY;
             }
         });