<commit_before>.top-sites {
  .tiles-wrapper {
    margin-right: -20px;

    @media (min-width: $break-point) {
      display: flex;
    }
  }

  // This is a container for the delete menu
  .tile-outer {
    @include link-menu-button;
    position: relative;
    display: inline-block;
    margin: 0 $tile-gutter 0 0;
    @media (min-width: $break-point) {
      display: flex;
    }

    // Only display a placeholder version (ie just outlines/shapes), for use
    // before sufficient data is available to display.
    &.placeholder {
      .site-icon-wrapper {
        width: 32px;
        height: 74px;
      }

      .tile {
        box-shadow: none;
      }
    }
  }

  .screenshot {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: 250%;
    background-position: top center;
    border-radius: 3px;
  }

  .tile {
    @include item-shadow;
    display: inline-flex;
    flex-shrink: 0;
    border-radius: $border-radius;
    flex-direction: column;
    font-size: $tile-font-size;
    height: $tile-height;
    position: relative;
    text-decoration: none;
    width: $tile-width;
    color: inherit;
    margin-bottom: $tile-gutter;
    @media (min-width: $break-point) {
      margin-bottom: 0;
    }

    .site-title {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      padding-top: 6px;
      font-size: 11px;
      text-align: center;
    }


    .tile-img-container {
      width: 100%;
      overflow: hidden;
      position: relative;
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      &.top-corner {
        position: absolute;
        height: 40px;
        width: 40px;
        z-index: 1000;
        top: -6px;
        left: -6px;
      }
    }
  }
}

// overrides for Top Sites styling experiment
.top-sites-new-style {
  .top-sites {

    .tile {
      @include item-shadow;
      box-shadow: none;

      .tile-img-container {
        // This is a hack so the title is visible since we are positioning
        // it outside of the container for the experiment. If/when the experiment
        // graduates, we should change the HTML instead.
        overflow: visible;
      }

      .site-title {
        height: 22px;
        overflow: hidden;
      }
    }

    .site-icon {
      .site-icon-background {
        border-radius: 3px;
      }

      .site-icon-title {
        background: transparent;
        border: 0;
        position: absolute;
        top: 100%;
      }

      &:hover {
        .site-icon-title {
          background: transparent;
        }
      }
    }
  }
}<commit_msg>fix(style): #2076 force alignment of top sites titles<commit_after>.top-sites {
  .tiles-wrapper {
    margin-right: -20px;

    @media (min-width: $break-point) {
      display: flex;
    }
  }

  // This is a container for the delete menu
  .tile-outer {
    @include link-menu-button;
    position: relative;
    display: inline-block;
    margin: 0 $tile-gutter 0 0;
    @media (min-width: $break-point) {
      display: flex;
    }

    // Only display a placeholder version (ie just outlines/shapes), for use
    // before sufficient data is available to display.
    &.placeholder {
      .site-icon-wrapper {
        width: 32px;
        height: 74px;
      }

      .tile {
        box-shadow: none;
      }
    }
  }

  .screenshot {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: 250%;
    background-position: top center;
    border-radius: 3px;
  }

  .tile {
    @include item-shadow;
    display: inline-flex;
    flex-shrink: 0;
    border-radius: $border-radius;
    flex-direction: column;
    font-size: $tile-font-size;
    height: $tile-height;
    position: relative;
    text-decoration: none;
    width: $tile-width;
    color: inherit;
    margin-bottom: $tile-gutter;
    @media (min-width: $break-point) {
      margin-bottom: 0;
    }

    .site-title {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      padding-top: 6px;
      font-size: 11px;
      text-align: center;
    }


    .tile-img-container {
      width: 100%;
      overflow: hidden;
      position: relative;
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      &.top-corner {
        position: absolute;
        height: 40px;
        width: 40px;
        z-index: 1000;
        top: -6px;
        left: -6px;
      }
    }
  }
}

// overrides for Top Sites styling experiment
.top-sites-new-style {
  .top-sites {

    .tile {
      @include item-shadow;
      box-shadow: none;

      .tile-img-container {
        // This is a hack so the title is visible since we are positioning
        // it outside of the container for the experiment. If/when the experiment
        // graduates, we should change the HTML instead.
        overflow: visible;
      }

      .site-title {
        height: 22px;
        overflow: hidden;
      }
    }

    .site-icon {
      .site-icon-background {
        border-radius: 3px;
      }

      .site-icon-title {
        background: transparent;
        border: 0;
        position: absolute;
        top: 100%;
        offset-inline-start: 0;
      }

      &:hover {
        .site-icon-title {
          background: transparent;
        }
      }
    }
  }
}
{'fraction_non_alphanumeric': 0.11856243052982586, 'fraction_numerical': 0.02093367914042238, 'mean_word_length': 1.7103413654618473, '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': '7650418', 'n_tokens_mistral': 1860, 'n_tokens_neox': 1701, 'n_words': 449}