# HG changeset patch
# User Mads Kiilerich <mads@kiilerich.com>
# Date 1592760735 -7200
# Node ID 33a57f96c5e0d88e0a9ddb75bab9689c4172d833
# Parent  8d6a7e174b0329fb9410b0bc3545ae4aee55eec5
diff: fix width of line number columns

Column widths did in some cases break with 32757d5e9d0b. The markup was too
magic to find and fix the exact root cause, but we fix it by refactoring to a
slightly different approach:

Use fixed table-layout to be able to control columns width from the first row,
without too much auto sizing.

Instead of using padding, put the line number in a centered block-inline with
right-align and min-width. The numbers will thus generally be right aligned,
but will expand to use less margin for big line numbers.

diff -r 8d6a7e174b03 -r 33a57f96c5e0 kallithea/front-end/kallithea-diff.less
--- a/kallithea/front-end/kallithea-diff.less	Sun Jun 21 19:32:15 2020 +0200
+++ b/kallithea/front-end/kallithea-diff.less	Sun Jun 21 19:32:15 2020 +0200
@@ -62,6 +62,7 @@
   border-collapse: collapse;
   border-radius: 0px !important;
   width: 100%;
+  table-layout: fixed;
 
   /* line coloring */
   .context {
@@ -107,9 +108,7 @@
 
   /* line number columns */
   td.lineno {
-    padding-left: 2px;
-    padding-right: 2px !important;
-    width: 30px;
+    width: 4em;
     border-right: 1px solid @panel-default-border !important;
     vertical-align: middle !important;
     font-size: 11px;
@@ -117,17 +116,14 @@
     line-height: normal;
     text-align: center;
   }
-  td.lineno.new {
-    text-align: right;
-  }
-  td.lineno.old {
-    text-align: right;
+  td.lineno[colspan="2"] {
+    width: 8em;
   }
   td.lineno a {
     color: #aaa !important;
-    padding-left: 6px;
-    padding-right: 6px;
-    display: block;
+    display: inline-block;
+    min-width: 2em;
+    text-align: right;
   }
   tr.line:hover td.lineno a {
     color: #333 !important;