fix: Line numbers when scrolling

Author: rtfpessoa

src/ui/css/diff2html.css

@@ -74,19 +74,13 @@
   font-size: 13px;
 }
 
-.d2h-diff-tbody > tr > td {
-  height: 20px;
-  line-height: 1;
-}
-
 .d2h-files-diff {
   display: block;
   width: 100%;
   height: 100%;
 }
 
 .d2h-file-diff {
-  overflow-x: scroll;
   overflow-y: hidden;
 }
 
@@ -102,13 +96,15 @@
 .d2h-code-line {
   display: inline-block;
   white-space: nowrap;
-  padding: 0 10px;
+  /* Compensate for the absolute positioning of the line numbers */
+  padding: 0 8em;
 }
 
 .d2h-code-side-line {
   display: inline-block;
   white-space: nowrap;
-  padding: 0 10px;
+  /* Compensate for the absolute positioning of the line numbers */
+  padding: 0 4.5em;
 }
 
 .d2h-code-line del,
@@ -149,26 +145,27 @@
 .line-num1 {
   box-sizing: border-box;
   float: left;
-  width: 40px;
+  width: 3.5em;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding-left: 3px;
+  padding: 0 0.5em 0 0.5em;
 }
 
 .line-num2 {
   box-sizing: border-box;
   float: right;
-  width: 40px;
+  width: 3.5em;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding-left: 3px;
+  padding: 0 0.5em 0 0.5em;
 }
 
 .d2h-code-linenumber {
   box-sizing: border-box;
-  width: 86px;
-  padding-left: 2px;
-  padding-right: 2px;
+  width: 7.5em;
+  /* Keep the numbers fixed on line contents scroll */
+  position: absolute;
+  display: inline-block;
   background-color: #fff;
   color: rgba(0, 0, 0, 0.3);
   text-align: right;
@@ -177,11 +174,16 @@
   cursor: pointer;
 }
 
+.d2h-code-linenumber:after {
+  content: '\200b';
+}
+
 .d2h-code-side-linenumber {
+  /* Keep the numbers fixed on line contents scroll */
+  position: absolute;
+  display: inline-block;
   box-sizing: border-box;
-  width: 56px;
-  padding-left: 5px;
-  padding-right: 5px;
+  width: 4em;
   background-color: #fff;
   color: rgba(0, 0, 0, 0.3);
   text-align: right;
@@ -192,6 +194,10 @@
   text-overflow: ellipsis;
 }
 
+.d2h-code-side-linenumber:after {
+  content: '\200b';
+}
+
 .d2h-code-side-emptyplaceholder,
 .d2h-emptyplaceholder {
   background-color: #f1f1f1;