<commit_before>@import "~styles/themes/colors";
@import "~styles/themes/typography";

.layout {
  display: flex;
  flex-direction: column;
  // Header size: 60px. Make sure to change this if header height is changed.
  height: calc(100vh - 60px);

  .headerContainer {
    flex: 0 0 auto;
    margin: 2px 20px 0 20px;
  }

  .mainContainer {
    flex: 1;
    display: flex;

    .leftPane:not(:empty) {
      border-right: 2px solid $lightest-grey;
      flex: 0 0 auto;
      padding: 20px 20px 0 20px;
      overflow-x: visible;
    }

    .centerPane {
      flex: 1 0 auto;
      display: flex;
      flex-direction: column;

      .viewContainer {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        padding: 20px 20px 0 20px;
      }
    }

    .rightPane:not(:empty) {
      border-left: 2px solid $lightest-grey;
      flex: 0 0 auto;
      overflow: auto;
      padding-left: 10px;
      padding-right: 5px;
    }
  }
}

.tabLabel {
  font-size: $font-size-h6;
  margin-right: 10px;
}

.tabCounter {
  color: $medium-grey;
  font-size: $font-size;
  font-weight: $font-weight-regular;
}

.tableContainer {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;

  .dataContainer {
    flex: 1 0 50px;

    &:not(:only-child) {
      flex: 0 0 50px;
    }
  }

  .noResultsContainer {
    flex: 1 0 auto;
    max-height: 400px;
  }
}
<commit_msg>[Data Discovery] Make panes scroll independently (#2124)<commit_after>@import "~styles/themes/colors";
@import "~styles/themes/typography";

.layout {
  display: flex;
  flex-direction: column;
  // Header size: 60px. Make sure to change this if header height is changed.
  height: calc(100vh - 60px);

  .headerContainer {
    flex: 0 0 auto;
    margin: 2px 20px 0 20px;
  }

  .mainContainer {
    flex: 1 0 0;
    display: flex;
    min-height: 0;

    .leftPane:not(:empty) {
      border-right: 2px solid $lightest-grey;
      flex: 0 0 auto;
      padding: 14px 20px 14 20px;
      overflow-x: visible;
    }

    .centerPane {
      flex: 1 0 auto;
      display: flex;
      flex-direction: column;
      overflow: auto;

      .viewContainer {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        padding: 20px 20px 0 20px;
      }
    }

    .rightPane:not(:empty) {
      border-left: 2px solid $lightest-grey;
      flex: 0 0 auto;
      overflow: overlay;
      padding: 0 5px 0 10px;

      &::-webkit-scrollbar {
        display: none;
      }

      &:hover::-webkit-scrollbar {
        display: block;
      }
    }
  }
}

.tabLabel {
  font-size: $font-size-h6;
  margin-right: 10px;
}

.tabCounter {
  color: $medium-grey;
  font-size: $font-size;
  font-weight: $font-weight-regular;
}

.tableContainer {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;

  .dataContainer {
    flex: 1 0 50px;

    &:not(:only-child) {
      flex: 0 0 50px;
    }
  }

  .noResultsContainer {
    flex: 1 0 auto;
    max-height: 400px;
  }
}

{'fraction_non_alphanumeric': 0.12550200803212852, 'fraction_numerical': 0.04417670682730924, 'mean_word_length': 2.143007360672976, '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': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3107478', 'n_tokens_mistral': 1215, 'n_tokens_neox': 1047, 'n_words': 283}