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

@@ -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: '';

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;
             }
         });