Changeset - 33a57f96c5e0
[Not reviewed]
default
0 1 0
Mads Kiilerich (mads) - 6 years ago 2020-06-21 19:32:15
mads@kiilerich.com
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.
1 file changed with 7 insertions and 11 deletions:
0 comments (0 inline, 0 general)
kallithea/front-end/kallithea-diff.less
Show inline comments
 
@@ -62,6 +62,7 @@ BIN_FILENODE = 6
 
  border-collapse: collapse;
 
  border-radius: 0px !important;
 
  width: 100%;
 
  table-layout: fixed;
 

	
 
  /* line coloring */
 
  .context {
 
@@ -107,9 +108,7 @@ BIN_FILENODE = 6
 

	
 
  /* 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 @@ BIN_FILENODE = 6
 
    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;
0 comments (0 inline, 0 general)