[ui] Fix tooltip getting clipped at the bottom of the screen

Author: alexander-yakushev

res/flamegraph-rendering/script.js

@@ -682,11 +682,11 @@ function canvasOnMouseMove(e) {
         tooltip_x = cursor_x - tooltip_w;
       }
 
-      if (cursor_y + tooltip_h + 20 > canvas.clientHeight) {
+      if (e.clientY + tooltip_h + 20 > window.innerHeight - statusBox.clientHeight) {
         tooltip_y = cursor_y - tooltip_h;
       }
 
-      console.log("cursor_x", cursor_x, "clientWidth", canvas.clientWidth, "tooltip_w", tooltip_w, "tooltip_h", tooltip_h, "tooltip_x", tooltip_x);
+      // console.log("e.clientY", e.clientY, "cursor_y", cursor_y, "window.innerHeight", window.innerHeight, "tooltip_h", tooltip_h, "tooltip_y", tooltip_y);
 
       tooltip.style.left = tooltip_x;
       tooltip.style.top = tooltip_y;

res/flamegraph-rendering/template.html

@@ -17,7 +17,7 @@
       #tooltip .statdiv {display:flex; justify-content:space-around;}
       #tooltipRightClickHint {font-size:9px; width:100%; display:flex; justify-content:center;}
       @keyframes fadeIn { 99% { visibility:hidden; } 100% { visibility:visible; }}
-      .statusBox {background-color:#ffffe6; position:fixed; left:0; bottom:0; width:100%;
+      #statusBox {background-color:#ffffe6; position:fixed; left:0; bottom:0; width:100%;
                   box-sizing: border-box; padding:5px 1em; display:inline-flex;
                   justify-content:space-between;}
       #hoverTip {overflow: hidden; white-space: nowrap}
@@ -117,7 +117,7 @@
             </div>
             <div id="tooltipRightClickHint"><span><i>Right click for options</i></span></div>
           </div>
-          <div class='statusBox'>
+          <div id='statusBox'>
             <span id="spinner"></span>
             <span id='hoverTip'></span>
             <span id='matchContainer'>Matched: <span id='matchedLabel'></span></span>