Keep the code in step with its line numbers

The stylesheet overhaul in 4ce57f5 gave the pre of the tree and blame
pages the site's monospace font but left the code element inside it on
the browser's own, Courier in Safari and DejaVu Sans Mono on a typical
Linux desktop. A line box holds both fonts on one baseline, so where
their ascent and descent differ each code line comes out a little
taller than its number. By the end of a 2,000 line file the code sat 45
lines low in Safari and 109 in all three engines on Debian.

2 files changed, 17 insertions, 0 deletions

diff --git a/assets/cgit.css b/assets/cgit.cssindex dbd807c..0d2da53 100644--- a/assets/cgit.css+++ b/assets/cgit.css@@ -645,6 +645,14 @@ div#cgit table.blob pre {   font-family: var(--font-mono); } +/*+ * The code is set exactly like the line numbers beside it, since in another+ * font or size each line can come out taller than its number.+ */+div#cgit table.blob code {+  font: inherit;+}+ div#cgit table.blob td.linenumbers a, div#cgit table.ssdiff td.lineno a {   color: var(--muted);
diff --git a/assets/cgit.css b/assets/cgit.css
index dbd807c..0d2da53 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -645,6 +645,14 @@ div#cgit table.blob pre {
   font-family: var(--font-mono);
 }
 
+/*
+ * The code is set exactly like the line numbers beside it, since in another
+ * font or size each line can come out taller than its number.
+ */
+div#cgit table.blob code {
+  font: inherit;
+}
+
 div#cgit table.blob td.linenumbers a,
 div#cgit table.ssdiff td.lineno a {
   color: var(--muted);
diff --git a/tests/t0104-tree.sh b/tests/t0104-tree.shindex b48c394..fefff4a 100755--- a/tests/t0104-tree.sh+++ b/tests/t0104-tree.sh@@ -22,6 +22,15 @@ test_expect_success 'no line 2' ' 	! grep "<a id=.n2. href=.#n2.>2</a>" tmp ' +# The numbers and the code are two columns of text that a browser keeps in+# step only while both are set in one font. Only a browser shows the drift,+# so this checks the rule that prevents it.+test_expect_success 'the code is set in the font of its line numbers' '+	sed -n "/^div#cgit table.blob code {/,/^}/p" \+		"$TEST_OUTPUT_DIRECTORY/../assets/cgit.css" >rule &&+	grep "^  font: inherit;$" rule+'+ test_expect_success 'generate foo+bar/tree' 'cgit_url "foo%2bbar/tree" >tmp'  test_expect_success 'verify a+b link' '
diff --git a/tests/t0104-tree.sh b/tests/t0104-tree.sh
index b48c394..fefff4a 100755
--- a/tests/t0104-tree.sh
+++ b/tests/t0104-tree.sh
@@ -22,6 +22,15 @@ test_expect_success 'no line 2' '
 	! grep "<a id=.n2. href=.#n2.>2</a>" tmp
 '
 
+# The numbers and the code are two columns of text that a browser keeps in
+# step only while both are set in one font. Only a browser shows the drift,
+# so this checks the rule that prevents it.
+test_expect_success 'the code is set in the font of its line numbers' '
+	sed -n "/^div#cgit table.blob code {/,/^}/p" \
+		"$TEST_OUTPUT_DIRECTORY/../assets/cgit.css" >rule &&
+	grep "^  font: inherit;$" rule
+'
+
 test_expect_success 'generate foo+bar/tree' 'cgit_url "foo%2bbar/tree" >tmp'
 
 test_expect_success 'verify a+b link' '