fix: HTML report makes room for 4-digit line numbers #1124

Fixes: #1124

4 files changed, 17 insertions, 13 deletions

diff --git a/CHANGES.rst b/CHANGES.rst
index 0c5d7667..7eaf22a2 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -29,8 +29,12 @@ Unreleased
   they have been combined.  This was requested in `issue 1108`_ and implemented
   in `pull request 1110`_.  Thanks, Éric Larivière.
 
+- The HTML report has a little more room for line numbers so that 4-digit
+  numbers work well, fixing `issue 1124`_.
+
 .. _issue 1108: https://github.com/nedbat/coveragepy/issues/1108
 .. _pull request 1110: https://github.com/nedbat/coveragepy/pull/1110
+.. _issue 1124: https://github.com/nedbat/coveragepy/issues/1124
 
 .. _changes_54:
 
diff --git a/coverage/htmlfiles/style.css b/coverage/htmlfiles/style.css
index 3e7f9b66..36ee2a6e 100644
--- a/coverage/htmlfiles/style.css
+++ b/coverage/htmlfiles/style.css
@@ -34,7 +34,7 @@ a.nav:hover { text-decoration: underline; color: inherit; }
 
 @media (prefers-color-scheme: dark) { #header { border-color: #333; } }
 
-.indexfile #footer { margin: 1rem 3rem; }
+.indexfile #footer { margin: 1rem 3.5rem; }
 
 .pyfile #footer { margin: 1rem 1rem; }
 
@@ -42,9 +42,9 @@ a.nav:hover { text-decoration: underline; color: inherit; }
 
 @media (prefers-color-scheme: dark) { #footer .content { color: #aaa; } }
 
-#index { margin: 1rem 0 0 3rem; }
+#index { margin: 1rem 0 0 3.5rem; }
 
-#header .content { padding: 1rem 3rem; }
+#header .content { padding: 1rem 3.5rem; }
 
 h1 { font-size: 1.25em; display: inline-block; }
 
@@ -122,13 +122,13 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 
 .keyhelp .key { border: 1px solid black; border-color: #888 #333 #333 #888; padding: .1em .35em; font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: bold; background: #eee; }
 
-#source { padding: 1em 0 1em 3rem; font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
+#source { padding: 1em 0 1em 3.5rem; font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
 
 #source p { position: relative; white-space: pre; }
 
 #source p * { box-sizing: border-box; }
 
-#source p .n { float: left; text-align: right; width: 3rem; box-sizing: border-box; margin-left: -3rem; padding-right: 1em; color: #999; }
+#source p .n { float: left; text-align: right; width: 3.5rem; box-sizing: border-box; margin-left: -3.5rem; padding-right: 1em; color: #999; }
 
 @media (prefers-color-scheme: dark) { #source p .n { color: #777; } }
 
diff --git a/coverage/htmlfiles/style.scss b/coverage/htmlfiles/style.scss
index 8169269e..158d1fb4 100644
--- a/coverage/htmlfiles/style.scss
+++ b/coverage/htmlfiles/style.scss
@@ -16,7 +16,7 @@
 /* Don't edit this .css file. Edit the .scss file instead! */
 
 // Dimensions
-$left-gutter: 3rem;
+$left-gutter: 3.5rem;
 
 
 //
@@ -166,7 +166,7 @@ a.nav {
 }
 
 .indexfile #footer {
-    margin: 1rem 3rem;
+    margin: 1rem $left-gutter;
 }
 
 .pyfile #footer {
@@ -181,7 +181,7 @@ a.nav {
 }
 
 #index {
-    margin: 1rem 0 0 3rem;
+    margin: 1rem 0 0 $left-gutter;
 }
 
 // Header styles
diff --git a/tests/gold/html/styled/style.css b/tests/gold/html/styled/style.css
index 3e7f9b66..36ee2a6e 100644
--- a/tests/gold/html/styled/style.css
+++ b/tests/gold/html/styled/style.css
@@ -34,7 +34,7 @@ a.nav:hover { text-decoration: underline; color: inherit; }
 
 @media (prefers-color-scheme: dark) { #header { border-color: #333; } }
 
-.indexfile #footer { margin: 1rem 3rem; }
+.indexfile #footer { margin: 1rem 3.5rem; }
 
 .pyfile #footer { margin: 1rem 1rem; }
 
@@ -42,9 +42,9 @@ a.nav:hover { text-decoration: underline; color: inherit; }
 
 @media (prefers-color-scheme: dark) { #footer .content { color: #aaa; } }
 
-#index { margin: 1rem 0 0 3rem; }
+#index { margin: 1rem 0 0 3.5rem; }
 
-#header .content { padding: 1rem 3rem; }
+#header .content { padding: 1rem 3.5rem; }
 
 h1 { font-size: 1.25em; display: inline-block; }
 
@@ -122,13 +122,13 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 
 .keyhelp .key { border: 1px solid black; border-color: #888 #333 #333 #888; padding: .1em .35em; font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: bold; background: #eee; }
 
-#source { padding: 1em 0 1em 3rem; font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
+#source { padding: 1em 0 1em 3.5rem; font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
 
 #source p { position: relative; white-space: pre; }
 
 #source p * { box-sizing: border-box; }
 
-#source p .n { float: left; text-align: right; width: 3rem; box-sizing: border-box; margin-left: -3rem; padding-right: 1em; color: #999; }
+#source p .n { float: left; text-align: right; width: 3.5rem; box-sizing: border-box; margin-left: -3.5rem; padding-right: 1em; color: #999; }
 
 @media (prefers-color-scheme: dark) { #source p .n { color: #777; } }