Mercurial > kallithea

changeset 8574:33a57f96c5e0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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.
author Mads Kiilerich <mads@kiilerich.com>
date Sun, 21 Jun 2020 19:32:15 +0200
parents 8d6a7e174b03
children 8305790b9533
files kallithea/front-end/kallithea-diff.less
diffstat 1 files changed, 7 insertions(+), 11 deletions(-) [+]
line wrap: on
line diff
--- 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;