1 file changed, 15 insertions, 3 deletions
diff --git a/assets/cgit.js b/assets/cgit.js
index 2c0a828..807f15f 100644
--- a/assets/cgit.js
+++ b/assets/cgit.js
@@ -112,7 +112,7 @@ var bar = null;
 
 function place_bar() {
   var match, first, last, table;
-  var table_box, first_box, last_box, top, bottom;
+  var table_box, first_box, last_box, leading, origin, top, bottom;
 
   if (bar) {
     bar.remove();
@@ -131,12 +131,24 @@ function place_bar() {
   table_box = table.getBoundingClientRect();
   first_box = first.getBoundingClientRect();
   last_box = last.getBoundingClientRect();
-  top = Math.min(first_box.top, last_box.top) - table_box.top;
-  bottom = Math.max(first_box.bottom, last_box.bottom) - table_box.top;
+
+  // An anchor's box holds only its digits, centred in a line that the line
+  // height makes taller, so the bar reaches out by the difference to cover
+  // whole lines. A line height of normal leaves nothing to add.
+  leading = parseFloat(getComputedStyle(first).lineHeight);
+  leading = (leading - first_box.height) / 2 || 0;
+
+  // The bar is placed from inside the table's border, not from its edge.
+  origin = table_box.top + table.clientTop;
+  top = Math.min(first_box.top, last_box.top) - leading - origin;
+  bottom = Math.max(first_box.bottom, last_box.bottom) + leading - origin;
   bar = document.createElement("div");
   bar.className = "line-hl";
   bar.style.top = top + "px";
   bar.style.height = (bottom - top) + "px";
+  // A table too wide for the page scrolls sideways, and the bar has to run
+  // to the end of its longest line rather than to the edge of the view.
+  bar.style.width = table.scrollWidth + "px";
   table.appendChild(bar);
 
   // A browser only scrolls to a fragment that names a real id, which a range