f3e4bf4342a01d96c1da56e07faacdf2e194a50f
hiram
  Fri Nov 6 16:53:14 2020 -0800
apply the magic 3 to the left offsets for vertical line and message box refs #21980

diff --git src/hg/js/hgTracks.js src/hg/js/hgTracks.js
index 8e473c1..5530108 100644
--- src/hg/js/hgTracks.js
+++ src/hg/js/hgTracks.js
@@ -4598,34 +4598,35 @@
     var windowUp = false;     // see if window is supposed to become visible
     var foundIdx = -1;
     if (mouseOver.spans[trackName]) {
        foundIdx = mouseOver.findRange(graphOffset, mouseOver.spans[trackName]);
     }
     // can show 'no data' when not found
     var mouseOverValue = "no data";
     if (foundIdx > -1) { // value to display
       mouseOverValue = " " + mouseOver.spans[trackName][foundIdx].v + " ";
     }
     $('#mouseOverText').html(mouseOverValue);
     var msgWidth = Math.ceil($('#mouseOverText').width());
     var msgHeight = Math.ceil($('#mouseOverText').height());
     var lineHeight = Math.max(0, tdHeight - msgHeight);
     var lineTop = Math.max(0, tdTop + msgHeight);
-    var msgLeft = Math.max(0, clientX - (msgWidth/2));
+    var msgLeft = Math.max(0, clientX - (msgWidth/2) - 3); // with magic 3
+    var lineLeft = Math.max(0, clientX - 3);  // with magic 3
     $('#mouseOverText').css('left',msgLeft + "px");
     $('#mouseOverText').css('top',tdTop + "px");
-    $('#mouseOverVerticalLine').css('left',clientX + "px");
+    $('#mouseOverVerticalLine').css('left',lineLeft + "px");
     $('#mouseOverVerticalLine').css('top',lineTop + "px");
     $('#mouseOverVerticalLine').css('height',lineHeight + "px");
     windowUp = true;      // yes, window is to become visible
 
     if (windowUp) {     // the window should become visible
       mouseOver.popUpVisible();
     } else {    // the window should disappear
       mouseOver.popUpDisappear();
     } //      window visible/not visible
     },  //      mouseInTrackImage function (evt)
 
     // timeout calls here upon completion
     delayCompleted: function()
     {
        mouseOver.delayDone = true;