<commit_before>
#dashboard-page {

  margin: 45px;

  #auto-refresh-box, #minute-columns-box {
    @include edged-panel();
    @include right-align(15px);
     margin: { bottom: 10px; left: 15px; right: 0px; }
    display: inline-block;
  }

  #progress-button-box, #download-button-box {
    @include right-align(15px);
    text-align: right;
    margin-left: 10px;
    #progress-button, #download-button {
      @include non-code-font();
       font-size: 1em;
         padding: { bottom: 2px; left: 9px; right: 9px; }
      text-align: left;
        position: relative;
             top: -7px;
    }
  }

  #traffic-lights {
    width: 1030px;
    max-height: 20000px;
    margin-left: 110px; // 1312236  See below
    overflow-x: scroll;
    overflow-y: hidden;
    margin-bottom: 80px;
    padding-bottom: 100px; // space for tool-tip popup

    .time-tick {
      display: block;
      @include non-code-font();
      text-align: center;
      font-size: 13px;
      color: lighten(black,60%);
      $down-triangle: "\25BF";
      &:after { content: $down-triangle; }
    }
    .age {
      display: block;
      @include non-code-font();
      text-align: center;
      font-size: 13px;
      color: lighten(black,90%);
    }
    .column {
      padding: 0px;
       border: { bottom: dotted lighten($darker-color, 3%) 1px; }
      &.odd  { background: lighten($darker-color,  5%); }
      &.even { background: lighten($darker-color, 11%); }
    }
    .collapsed-multi-gap {
        display: inline-block;
      font-size: 12px;
          color: lighten(black,60%);
         margin: { left: 6px; right: 6px; bottom: 10px; }
      &:after { content: "\2026"; } // ellipsis
    }
    .gap {
        font-size: 0.7em;
      $thin-space: "\2009";
       text-align: center;
      &:after { content: $thin-space; }
    }
    .diff-traffic-light {
      position: relative;
      top: 3px;
    }
    th {
      background-color: transparent !important;
    }
  }

  // Stackoverflow 1312236
  .frozen-left-column {
    position: absolute;
    width: 100px;
    left: 50px;
    top: auto;

    .avatar-image img { width: 26px; height: 26px; }
    .traffic-light-count-wrapper { width: 40px; }
  }
}

#progress-dialog {
  padding-top: 0px;
  .animal.odd  { background: lighten($darker-color,3%); }
  .animal.even { background: lighten($darker-color,6%); }
  .progress {
    white-space: nowrap;
        padding: { left: 5px; right: 5px; }
  }
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - -
// I've tried using .traffic-light-diff-tip as an outer tag
// eg
//    .traffic-light-diff-tip {
//      .tag { .. }
//      .traffic-light-image { ... }
//    }
// I can't get it to work...
// - - - - - - - - - - - - - - - - - - - - - - - - - - -

.traffic-light-diff-tip-tag {
  @include non-code-font;
       font-size: 12px;
}

.traffic-light-diff-tip-traffic-light-image {
  height: 22px;
   width: 22px;
}

.traffic-light-diff-tip-avatar-image {
  @include rounded-corner(4px);
   width: 30px !important;
  height: 30px !important;
}

.traffic-light-diff-tip-line-count-deleted, .traffic-light-diff-tip-line-count-added {
  @include rounded-corner(4px);
  @include right-align(0px);
  @include diff-line-count;
  @include non-code-font;
  color: $darker-color;
  border: 1px solid lighten($darker-color,6%);
}

.traffic-light-diff-tip-line-count-deleted {
  background: $diff-deleted-color;
}
.traffic-light-diff-tip-line-count-added {
  background: $diff-added-color;
}

.d-for-days, .m-for-minutes, .h-for-hours {
  font-size: 10px;
}
<commit_msg>increase padding below dashboard traffic-lights for diff tool-tips that cover a larger number of files<commit_after>
#dashboard-page {

  margin: 45px;

  #auto-refresh-box, #minute-columns-box {
    @include edged-panel();
    @include right-align(15px);
     margin: { bottom: 10px; left: 15px; right: 0px; }
    display: inline-block;
  }

  #progress-button-box, #download-button-box {
    @include right-align(15px);
    text-align: right;
    margin-left: 10px;
    #progress-button, #download-button {
      @include non-code-font();
       font-size: 1em;
         padding: { bottom: 2px; left: 9px; right: 9px; }
      text-align: left;
        position: relative;
             top: -7px;
    }
  }

  #traffic-lights {
    width: 1030px;
    max-height: 20000px;
    margin-left: 110px; // 1312236  See below
    overflow-x: scroll;
    overflow-y: hidden;
    margin-bottom: 80px;
    padding-bottom: 400px; // space for tool-tip popup

    .time-tick {
      display: block;
      @include non-code-font();
      text-align: center;
      font-size: 13px;
      color: lighten(black,60%);
      $down-triangle: "\25BF";
      &:after { content: $down-triangle; }
    }
    .age {
      display: block;
      @include non-code-font();
      text-align: center;
      font-size: 13px;
      color: lighten(black,90%);
    }
    .column {
      padding: 0px;
       border: { bottom: dotted lighten($darker-color, 3%) 1px; }
      &.odd  { background: lighten($darker-color,  5%); }
      &.even { background: lighten($darker-color, 11%); }
    }
    .collapsed-multi-gap {
        display: inline-block;
      font-size: 12px;
          color: lighten(black,60%);
         margin: { left: 6px; right: 6px; bottom: 10px; }
      &:after { content: "\2026"; } // ellipsis
    }
    .gap {
        font-size: 0.7em;
      $thin-space: "\2009";
       text-align: center;
      &:after { content: $thin-space; }
    }
    .diff-traffic-light {
      position: relative;
      top: 3px;
    }
    th {
      background-color: transparent !important;
    }
  }

  // Stackoverflow 1312236
  .frozen-left-column {
    position: absolute;
    width: 100px;
    left: 50px;
    top: auto;

    .avatar-image img { width: 26px; height: 26px; }
    .traffic-light-count-wrapper { width: 40px; }
  }
}

#progress-dialog {
  padding-top: 0px;
  .animal.odd  { background: lighten($darker-color,3%); }
  .animal.even { background: lighten($darker-color,6%); }
  .progress {
    white-space: nowrap;
        padding: { left: 5px; right: 5px; }
  }
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - -
// I've tried using .traffic-light-diff-tip as an outer tag
// eg
//    .traffic-light-diff-tip {
//      .tag { .. }
//      .traffic-light-image { ... }
//    }
// I can't get it to work...
// - - - - - - - - - - - - - - - - - - - - - - - - - - -

.traffic-light-diff-tip-tag {
  @include non-code-font;
       font-size: 12px;
}

.traffic-light-diff-tip-traffic-light-image {
  height: 22px;
   width: 22px;
}

.traffic-light-diff-tip-avatar-image {
  @include rounded-corner(4px);
   width: 30px !important;
  height: 30px !important;
}

.traffic-light-diff-tip-line-count-deleted, .traffic-light-diff-tip-line-count-added {
  @include rounded-corner(4px);
  @include right-align(0px);
  @include diff-line-count;
  @include non-code-font;
  color: $darker-color;
  border: 1px solid lighten($darker-color,6%);
}

.traffic-light-diff-tip-line-count-deleted {
  background: $diff-deleted-color;
}
.traffic-light-diff-tip-line-count-added {
  background: $diff-added-color;
}

.d-for-days, .m-for-minutes, .h-for-hours {
  font-size: 10px;
}

{'fraction_non_alphanumeric': 0.17043719639139487, 'fraction_numerical': 0.032477446217904236, 'mean_word_length': 2.1208315288003465, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 20, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '232961', 'n_tokens_mistral': 2887, 'n_tokens_neox': 2642, 'n_words': 514}