<commit_before>
// Header
// ----------
.header
  +clearfix
  background: $white
  padding: 0 2rem
  box-shadow: 0 .1rem .2rem rgba($black, .1)
  display: flex
  height: $header-height
  font-size: 1.4rem
  line-height: 1.6rem
  position: relative
  text-align: center
  z-index: $z-index-9

  .container
    align-items: stretch
    display: flex
    width: 100%

  .btn
    height: 3.2rem
    margin-bottom: 0
    line-height: 3.2rem

  &.centered
    justify-content: center

    .header-left,
    .header-center,
    .header-right
      justify-content: center

  &.small
    background: $white
    box-shadow: none
    height: 4rem
    z-index: 1

    .container
      height: 4rem

    .header-tab
      font-size: 1.3rem
      height: 4rem
      padding: .8rem 1rem

      &:hover,
      &.is-active
        border-bottom-width: .2rem

// Elements

.header-item
  align-items: center
  display: flex
  padding: 1rem

  img
    height: 2rem
    margin-top: -.1rem
    vertical-align: middle

  a:not(.btn)
    color: $gray

    &:hover
      color: $primary

    &.is-active
      color: darken($primary, .3)

.header-tab
  align-items: center
  border-bottom: 1px solid transparent
  color: $gray
  display: block
  height: $header-height
  line-height: 24px
  padding: 13px 15px

  &:hover
    border-bottom: 1px solid $primary

  &.active
    border-bottom: 2px solid $primary
    color: $primary

// Containers

.header-left
  +media(desktop)
    align-items: stretch
  overflow-x: scroll
  display: flex
  flex: 1
  white-space: nowrap

.header-center
  overflow-x: scroll
  align-items: stretch
  display: flex
  left: 50%
  position: absolute
  transform: translateX(-50%)

.header-right
  overflow-x: scroll
  +media(tablet)
    display: flex
  +media(desktop)
    align-items: stretch

.header-full
  align-items: stretch
  display: flex
  justify-content: center
  text-align: center
  width: 100%

  & > .header-item
    align-items: stretch
    display: flex
    flex: 1
    justify-content: center
    padding: 0

    & > a
      align-items: center
      display: flex
      justify-content: center
      width: 100%
<commit_msg>Fix scrollable header on tablet & desktop<commit_after>
// Header
// ----------
.header
  +clearfix
  background: $white
  padding: 0 2rem
  box-shadow: 0 .1rem .2rem rgba($black, .1)
  display: flex
  height: $header-height
  font-size: 1.4rem
  line-height: 1.6rem
  position: relative
  text-align: center
  z-index: $z-index-9

  .container
    align-items: stretch
    display: flex
    width: 100%

  .btn
    height: 3.2rem
    margin-bottom: 0
    line-height: 3rem

  &.centered
    justify-content: center

    .header-left,
    .header-center,
    .header-right
      justify-content: center

  &.small
    background: $white
    box-shadow: none
    height: 4rem
    z-index: 1

    .container
      height: 4rem

    .header-tab
      font-size: 1.3rem
      height: 4rem
      padding: .8rem 1rem

      &:hover,
      &.is-active
        border-bottom-width: .2rem

// Elements

.header-item
  align-items: center
  display: flex
  padding: 1rem

  img
    height: 2rem
    margin-top: -.1rem
    vertical-align: middle

  a:not(.btn)
    color: $gray

    &:hover
      color: $primary

    &.is-active
      color: darken($primary, .3)

.header-tab
  align-items: center
  border-bottom: 1px solid transparent
  color: $gray
  display: block
  height: $header-height
  line-height: 24px
  padding: 13px 15px

  &:hover
    border-bottom: 1px solid $primary

  &.active
    border-bottom: 2px solid $primary
    color: $primary

// Containers

.header-left
  +media(mobile)
    overflow-x: scroll
  +media(desktop)
    align-items: stretch
  display: flex
  flex: 1
  white-space: nowrap

.header-center
  +media(mobile)
    overflow-x: scroll
  align-items: stretch
  display: flex
  left: 50%
  position: absolute
  transform: translateX(-50%)

.header-right
  +media(mobile)
    overflow-x: scroll
  +media(tablet)
    display: flex
  +media(desktop)
    align-items: stretch

.header-full
  align-items: stretch
  display: flex
  justify-content: center
  text-align: center
  width: 100%

  & > .header-item
    align-items: stretch
    display: flex
    flex: 1
    justify-content: center
    padding: 0

    & > a
      align-items: center
      display: flex
      justify-content: center
      width: 100%

{'fraction_non_alphanumeric': 0.11207486875142661, 'fraction_numerical': 0.024423647569048162, 'mean_word_length': 2.2873218304576146, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, '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': '3922030', 'n_tokens_mistral': 1619, 'n_tokens_neox': 1500, 'n_words': 400}