<commit_before>@import "~core/css/inc/mixins";
@import "~amo/css/inc/vars";
@import "~ui/css/vars";

.Addon {
  padding: $padding-page;

  @include respond-to(large) {
    padding: $padding-page-l;
  }

  .Addon-summary-and-install-button-wrapper {
    .InstallButton,
    .Button--get-firefox {
      @include respond-to(medium) {
        align-self: flex-end;
        margin-bottom: 12px;
      }
    }
  }
}

.Addon .Card {
  margin-bottom: $padding-page;

  @include respond-to(large) {
    margin-bottom: $padding-page-l;
  }
}

.Addon-icon {
  min-height: 72px;

  @include respond-to(medium) {
    min-height: 96px;
  }
}

.Addon-icon-image {
  height: 48px;
  width: 48px;

  @include respond-to(medium) {
    height: 64px;
    width: 64px;
  }
}

.Addon-header-wrapper {
  @include respond-to(large) {
    display: flex;
  }
}

.Addon-header-info-card {
  @include respond-to(large) {
    @include margin-end($padding-page-l);

    width: 65%;
  }

  .AddonCompatibilityError {
    margin: 0;
    margin-bottom: 12px;
  }
}

.Addon-header-meta-and-ratings {
  @include respond-to(large) {
    min-width: 300px;
    width: 35%;
  }
}

.Addon-title {
  @include font-regular();

  color: $black;
  font-size: $font-size-l;
  grid-column: 1 / span 2;
  margin: 0 0 $padding-page-l;
  width: 100%;
  word-wrap: break-word;

  .Addon-persona & {
    margin: $padding-page-l 0;
  }

  @include respond-to(medium) {
    font-size: $font-size-xl;
  }
}

.Addon-author {
  @include font-light();

  display: block;
  word-wrap: break-word;

  &,
  a,
  a:link {
    font-size: $font-size-m;
    font-weight: normal;
    text-decoration: none;

    @include respond-to(medium) {
      font-size: $font-size-l;
    }
  }
}

.Addon-header {
  display: grid;
  grid-template-columns: 1fr;
}

.Addon-theme-header {
  border-radius: $border-radius-default;
  max-height: 90px;
  min-height: 45px;
  order: -1;
  overflow-y: hidden;
  position: relative;
  width: 100%;
}

.Addon-theme-header-label {
  bottom: 10px;
  left: 10px;
  position: absolute;
}

.Addon-theme-header-image {
  display: block;
  height: 100px;
  object-fit: cover;
  object-position: top right;
  width: 100%;
}

.Addon-summary-and-install-button-wrapper {
  grid-column: 1 / span 2;
  width: 100%;

  .Button {
    white-space: nowrap;
  }

  @include respond-to(extraLarge) {
    display: flex;
    justify-content: space-between;
  }
}

.Addon-summary {
  font-size: $font-size-m-smaller;
  overflow-x: auto;
  word-wrap: break-word;

  @include respond-to(medium) {
    @include margin-end(24px);

    max-width: 550px;
  }
}

.AddonDescription-contents {
  word-wrap: break-word;
}

.Addon .InstallButton {
  @include respond-to(medium) {
    @include margin-start(auto);

    align-content: center;
    align-self: center;
  }
}

.Addon .InstallButton-button {
  width: 100%;

  @include respond-to(medium) {
    width: auto;
  }
}

// Details section with lots of grid stuff, on larger displays.
@include respond-to(large) {
  .Addon-details {
    display: grid;
    grid-auto-flow: column dense;
    grid-gap: 0 $padding-page-l;
    grid-template-columns: minmax(300px, 35%) auto;
    margin: 0;

    .Addon-main-content {
      grid-column: 2;
      // This span makes sure the left widget does not move vertically when
      // there is a long description.
      grid-row: 1 / span 100000;
      // Fixes screenshot overflow in FF 52 ESR.
      max-width: 100%;
      overflow-x: hidden;
    }

    .AddonDescription-contents {
      max-width: 550px;
    }
  }

  .Addon-screenshots {
    // overflow required to fix content overlap in Safari.
    // See https://github.com/mozilla/addons-frontend/issues/2847
    overflow-x: hidden;
  }

  // We hide this "Read reviews" link on larger displays as we actually show
  // the first page of reviews on the page.
  // TODO: Enable this once we load reviews on the addon page.
  // See: https://github.com/mozilla/addons-frontend/issues/2552
  // .Addon-overall-rating .Card-footer-link {
  //   display: none;
  // }
}
<commit_msg>Css fix for add ons (extensions) detail page (#4976)<commit_after>@import "~core/css/inc/mixins";
@import "~amo/css/inc/vars";
@import "~ui/css/vars";

.Addon {
  padding: $padding-page;

  @include respond-to(large) {
    padding: $padding-page-l;
  }

  .Addon-summary-and-install-button-wrapper {
    .InstallButton,
    .Button--get-firefox {
      @include respond-to(medium) {
        align-self: flex-end;
        margin-bottom: 12px;
      }
    }
  }
}

.Addon .Card {
  margin-bottom: $padding-page;

  @include respond-to(large) {
    margin-bottom: $padding-page-l;
  }
}

.Addon-icon {
  min-height: 72px;

  @include respond-to(medium) {
    min-height: 96px;
  }
}

.Addon-icon-image {
  height: 48px;
  width: 48px;

  @include respond-to(medium) {
    height: 64px;
    width: 64px;
  }
}

.Addon-header-wrapper {
  @include respond-to(large) {
    display: flex;
  }
}

.Addon-header-info-card {
  @include respond-to(large) {
    @include margin-end($padding-page-l);

    width: 65%;
  }

  .AddonCompatibilityError {
    margin: 0;
    margin-bottom: 12px;
  }
}

.Addon-header-meta-and-ratings {
  @include respond-to(large) {
    min-width: 300px;
    width: 35%;
  }
}

.Addon-title {
  @include font-regular();

  color: $black;
  font-size: $font-size-l;
  grid-column: 1 / span 2;
  line-height: 1.1;
  margin: 0 0 $padding-page-l;
  width: 100%;
  word-wrap: break-word;

  .Addon-persona & {
    margin: $padding-page-l 0;
  }

  @include respond-to(medium) {
    font-size: $font-size-xl;
  }
}

.Addon-author {
  @include font-light();

  display: block;
  padding-top: 3px;
  word-wrap: break-word;

  &,
  a,
  a:link {
    font-size: $font-size-m;
    font-weight: normal;
    text-decoration: none;

    @include respond-to(medium) {
      font-size: $font-size-l;
    }
  }
}

.Addon-header {
  display: grid;
  grid-template-columns: 1fr;
}

.Addon-theme-header {
  border-radius: $border-radius-default;
  max-height: 90px;
  min-height: 45px;
  order: -1;
  overflow-y: hidden;
  position: relative;
  width: 100%;
}

.Addon-theme-header-label {
  bottom: 10px;
  left: 10px;
  position: absolute;
}

.Addon-theme-header-image {
  display: block;
  height: 100px;
  object-fit: cover;
  object-position: top right;
  width: 100%;
}

.Addon-summary-and-install-button-wrapper {
  grid-column: 1 / span 2;
  width: 100%;

  .Button {
    white-space: nowrap;
  }

  @include respond-to(extraLarge) {
    display: flex;
    justify-content: space-between;
  }
}

.Addon-summary {
  font-size: $font-size-m-smaller;
  overflow-x: auto;
  word-wrap: break-word;

  @include respond-to(medium) {
    @include margin-end(24px);

    max-width: 550px;
  }
}

.AddonDescription-contents {
  word-wrap: break-word;
}

.Addon .InstallButton {
  @include respond-to(medium) {
    @include margin-start(auto);

    align-content: center;
    align-self: center;
  }
}

.Addon .InstallButton-button {
  width: 100%;

  @include respond-to(medium) {
    width: auto;
  }
}

// Details section with lots of grid stuff, on larger displays.
@include respond-to(large) {
  .Addon-details {
    display: grid;
    grid-auto-flow: column dense;
    grid-gap: 0 $padding-page-l;
    grid-template-columns: minmax(300px, 35%) auto;
    margin: 0;

    .Addon-main-content {
      grid-column: 2;
      // This span makes sure the left widget does not move vertically when
      // there is a long description.
      grid-row: 1 / span 100000;
      // Fixes screenshot overflow in FF 52 ESR.
      max-width: 100%;
      overflow-x: hidden;
    }

    .AddonDescription-contents {
      max-width: 550px;
    }
  }

  .Addon-screenshots {
    // overflow required to fix content overlap in Safari.
    // See https://github.com/mozilla/addons-frontend/issues/2847
    overflow-x: hidden;
  }

  // We hide this "Read reviews" link on larger displays as we actually show
  // the first page of reviews on the page.
  // TODO: Enable this once we load reviews on the addon page.
  // See: https://github.com/mozilla/addons-frontend/issues/2552
  // .Addon-overall-rating .Card-footer-link {
  //   display: none;
  // }
}

{'fraction_non_alphanumeric': 0.14841938239960942, 'fraction_numerical': 0.02404491639204199, 'mean_word_length': 2.562608695652174, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 4, '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': '5547082', 'n_tokens_mistral': 3278, 'n_tokens_neox': 3026, 'n_words': 658}