From 6b0ff5c2a085b7c29722f8e6daa32b82d74e46db Mon Sep 17 00:00:00 2001
From: Bryce Kwon <bryce@brycekwon.com>
Date: Sat, 24 Oct 2026 09:17:42 -1000
Subject: Keep the line highlight over the lines it names

The bar was measured from the table's border edge, a pixel above where
its offset counts from, and covered only the digits of each number. Its
width was the part of the table in view, so scrolling a long line
sideways left the highlight behind.
---
 assets/cgit.css |  1 -
 assets/cgit.js  | 18 +++++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/assets/cgit.css b/assets/cgit.css
index 2f53559..0149519 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -690,7 +690,6 @@ div#cgit table.blame {
 div#cgit div.line-hl {
   position: absolute;
   left: 0;
-  right: 0;
   background: var(--line-hl);
   pointer-events: none;
 }
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
-- 
cgit 2.9.1