1 files changed, 1129 insertions, 0 deletions

diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
new file mode 100644
index 00000000000..c0a2350d080
--- /dev/null
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -0,0 +1,1129 @@
+// Common
+.diff-file {
+  margin-bottom: $gl-padding;
+
+  &.conflict {
+    border-top: 1px solid $border-color;
+  }
+
+  .file-title,
+  .file-title-flex-parent {
+    border-top-left-radius: $border-radius-default;
+    border-top-right-radius: $border-radius-default;
+    box-shadow: 0 -2px 0 0 var(--white);
+    cursor: pointer;
+
+    .dropdown-menu {
+      cursor: auto;
+    }
+
+    @media (max-width: map-get($grid-breakpoints, sm)-1) {
+      .file-header-content {
+        width: 0;
+        flex: 1;
+      }
+
+      .file-actions {
+        margin-left: $gl-spacing-scale-2;
+      }
+    }
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      // The `+11` is to ensure the file header border shows when scrolled -
+      // the bottom of the compare-versions header and the top of the file header
+      $mr-file-header-top: $mr-version-controls-height + $header-height + $mr-tabs-height + 11;
+
+      position: -webkit-sticky;
+      position: sticky;
+      top: $mr-file-header-top;
+      z-index: 120;
+
+      .with-system-header & {
+        top: $mr-file-header-top + $system-header-height;
+      }
+
+      .with-system-header.with-performance-bar & {
+        top: $mr-file-header-top + $system-header-height + $performance-bar-height;
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: -1px;
+        left: -11px;
+        width: 10px;
+        height: calc(100% + 1px);
+        background: $white;
+        pointer-events: none;
+      }
+
+      .with-performance-bar & {
+        top: $mr-file-header-top + $performance-bar-height;
+      }
+
+      &.is-commit {
+        top: $header-height + $commit-stat-summary-height;
+
+        .with-performance-bar & {
+          top: $header-height + $commit-stat-summary-height + $performance-bar-height;
+        }
+      }
+
+      &.is-compare {
+        top: $header-height + $compare-branches-sticky-header-height;
+
+        .with-performance-bar & {
+          top: $performance-bar-height + $header-height + $compare-branches-sticky-header-height;
+        }
+      }
+    }
+
+    &:hover {
+      background-color: $gray-normal;
+    }
+
+    svg {
+      vertical-align: middle;
+      top: -1px;
+    }
+  }
+
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    &.conflict .file-title,
+    &.conflict .file-title-flex-parent {
+      top: $header-height;
+    }
+
+    .with-performance-bar &.conflict .file-title,
+    .with-performance-bar &.conflict .file-title-flex-parent {
+      top: $header-height + $performance-bar-height;
+    }
+
+    .with-system-header &.conflict .file-title,
+    .with-system-header &.conflict .file-title-flex-parent {
+      top: $header-height + $system-header-height;
+    }
+
+    .with-system-header.with-performance-bar &.conflict .file-title,
+    .with-system-header.with-performance-bar &.conflict .file-title-flex-parent {
+      top: $header-height + $performance-bar-height + $system-header-height;
+    }
+  }
+
+  .diff-content {
+    background: $white;
+    color: $gl-text-color;
+    border-radius: 0 0 3px 3px;
+
+    .unfold {
+      cursor: pointer;
+    }
+
+    .file-mode-changed {
+      padding: 10px;
+      color: $gray-500;
+    }
+
+    .suppressed-container {
+      padding: ($padding-base-vertical + 5px) $padding-base-horizontal;
+      text-align: center;
+
+      // "Changes suppressed. Click to show." link
+      .show-suppressed-diff {
+        font-size: 110%;
+        font-weight: $gl-font-weight-bold;
+      }
+    }
+
+    .diff-loading-error-block {
+      padding: $gl-padding * 2 $gl-padding;
+      text-align: center;
+    }
+  }
+
+  .image {
+    background: $gray-darker;
+    text-align: center;
+    padding: 30px;
+
+    .wrap {
+      display: inline-block;
+    }
+
+    .frame {
+      display: inline-block;
+      background-color: $white;
+      line-height: 0;
+
+      img {
+        border: 1px solid $white;
+        background-image: linear-gradient(45deg,
+        $border-color 25%,
+        transparent 25%,
+        transparent 75%,
+        $border-color 75%,
+        $border-color 100%),
+          linear-gradient(45deg,
+        $border-color 25%,
+        transparent 25%,
+        transparent 75%,
+        $border-color 75%,
+        $border-color 100%);
+        background-size: 10px 10px;
+        background-position: 0 0, 5px 5px;
+        max-width: 100%;
+      }
+
+      &.deleted {
+        border: 1px solid $deleted;
+      }
+
+      &.added {
+        border: 1px solid $added;
+      }
+    }
+
+    .image-info {
+      font-size: 12px;
+      margin: 5px 0 0;
+      color: $diff-image-info-color;
+    }
+
+    .view.swipe {
+      position: relative;
+
+      .swipe-frame {
+        display: block;
+        margin: auto;
+        position: relative;
+      }
+
+      .swipe-wrap {
+        overflow: hidden;
+        border-right: 1px solid $gray-300;
+        position: absolute;
+        display: block;
+        top: 13px;
+        right: 7px;
+
+        &.left-oriented {
+          /* only for commit view (different swipe viewer) */
+          border-right: 0;
+          border-left: 1px solid $gray-300;
+        }
+      }
+
+      .frame {
+        top: 0;
+        right: 0;
+
+        &.old-diff {
+          /* only for commit / compare view */
+          position: absolute;
+        }
+
+        &.deleted {
+          margin: 0;
+          display: block;
+          top: 13px;
+          right: 7px;
+        }
+      }
+
+      .swipe-bar {
+        display: block;
+        height: 100%;
+        width: 15px;
+        z-index: 100;
+        position: absolute;
+        cursor: pointer;
+
+        &:hover {
+          .top-handle {
+            background-position: -15px 3px;
+          }
+
+          .bottom-handle {
+            background-position: -15px -11px;
+          }
+        }
+
+        .top-handle {
+          display: block;
+          height: 14px;
+          width: 15px;
+          position: absolute;
+          top: 0;
+          background: image-url('swipemode_sprites.gif') 0 3px no-repeat;
+        }
+
+        .bottom-handle {
+          display: block;
+          height: 14px;
+          width: 15px;
+          position: absolute;
+          bottom: 0;
+          background: image-url('swipemode_sprites.gif') 0 -11px no-repeat;
+        }
+      }
+    }
+
+    //.view.swipe
+    .view.onion-skin {
+      .onion-skin-frame {
+        display: block;
+        margin: auto;
+        position: relative;
+      }
+
+      .frame.added,
+      .frame.deleted {
+        position: absolute;
+        display: block;
+        top: 0;
+        left: 0;
+      }
+
+      .controls {
+        display: block;
+        height: 14px;
+        width: 300px;
+        z-index: 100;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        margin-left: -150px;
+
+        .drag-track {
+          display: block;
+          position: absolute;
+          top: 0;
+          left: 12px;
+          height: 10px;
+          width: 276px;
+          background: image-url('onion_skin_sprites.gif') -4px -20px repeat-x;
+        }
+
+        .dragger {
+          display: block;
+          position: absolute;
+          left: 0;
+          top: 0;
+          height: 14px;
+          width: 14px;
+          background: image-url('onion_skin_sprites.gif') 0 -34px repeat-x;
+          cursor: pointer;
+        }
+
+        .transparent {
+          display: block;
+          position: absolute;
+          top: 2px;
+          right: 0;
+          height: 10px;
+          width: 10px;
+          background: image-url('onion_skin_sprites.gif') -2px 0 no-repeat;
+        }
+
+        .opaque {
+          display: block;
+          position: absolute;
+          top: 2px;
+          left: 0;
+          height: 10px;
+          width: 10px;
+          background: image-url('onion_skin_sprites.gif') -2px -10px no-repeat;
+        }
+      }
+    }
+
+    //.view.onion-skin
+  }
+
+  .view-modes {
+    padding: 10px;
+    text-align: center;
+    background: $gray-darker;
+
+    ul,
+    li {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: inline-block;
+    }
+
+    li {
+      color: $diff-view-modes-color;
+      border-left: 1px solid $diff-view-modes-border;
+      padding: 0 12px 0 16px;
+      cursor: pointer;
+
+      &:first-child {
+        border-left: 0;
+      }
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      &.active {
+        cursor: default;
+        color: $gl-text-color;
+
+        &:hover {
+          text-decoration: none;
+        }
+      }
+
+      &.disabled {
+        display: none;
+      }
+    }
+  }
+
+  .diff-file-container {
+    .frame.deleted {
+      border: 1px solid $deleted;
+      background-color: inherit;
+    }
+
+    .frame.added {
+      border: 1px solid $added;
+      background-color: inherit;
+    }
+
+    .swipe.view,
+    .onion-skin.view {
+      .swipe-wrap {
+        top: 0;
+        left: 0;
+      }
+
+      .frame.deleted {
+        top: 0;
+        right: 0;
+      }
+
+      .swipe-bar {
+        top: 0;
+
+        .top-handle {
+          top: -14px;
+          left: -7px;
+        }
+
+        .bottom-handle {
+          bottom: -14px;
+          left: -7px;
+        }
+      }
+
+      .file-container {
+        display: inline-block;
+
+        .file-content {
+          padding: 0;
+
+          img {
+            max-width: none;
+          }
+        }
+      }
+    }
+
+    .onion-skin.view .controls {
+      bottom: -25px;
+    }
+  }
+
+  .discussion-notes .discussion-notes {
+    margin-left: 0;
+    border-left: 0;
+  }
+}
+
+table.code {
+  width: 100%;
+  font-family: $monospace-font;
+  border: 0;
+  border-collapse: separate;
+  margin: 0;
+  padding: 0;
+  table-layout: fixed;
+  border-radius: 0 0 $border-radius-default $border-radius-default;
+
+  tr:first-of-type.line_expansion > td {
+    border-top: 0;
+  }
+
+  tr:nth-last-of-type(2).line_expansion > td {
+    border-bottom: 0;
+  }
+
+  tr.line_holder td {
+    line-height: $code-line-height;
+    font-size: $code-font-size;
+    vertical-align: top;
+
+    span {
+      white-space: break-spaces;
+
+      &.context-cell {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+      }
+
+      &.line {
+        word-wrap: break-word;
+      }
+    }
+
+    &.diff-line-num {
+      user-select: none;
+      margin: 0;
+      padding: 0 10px 0 5px;
+      border-right-width: 1px;
+      border-right-style: solid;
+      text-align: right;
+      width: 50px;
+      position: relative;
+      white-space: nowrap;
+
+      a {
+        transition: none;
+        float: left;
+        width: 100%;
+        font-weight: $gl-font-weight-normal;
+
+        &[disabled] {
+          cursor: default;
+
+          &:hover,
+          &:active {
+            text-decoration: none;
+          }
+        }
+      }
+
+      &:not(.js-unfold-bottom) a::before {
+        content: attr(data-linenumber);
+      }
+    }
+
+    &.line_content {
+      display: block;
+      margin: 0;
+      padding: 0 1.5em;
+      border: 0;
+      position: relative;
+      white-space: pre-wrap;
+
+      &.parallel {
+        display: table-cell;
+        width: 46%;
+
+        span {
+          word-break: break-all;
+        }
+      }
+
+      &.old {
+        &::before {
+          content: '-';
+          position: absolute;
+          left: 0.5em;
+        }
+
+        &.with-coverage::before {
+          left: 0;
+        }
+      }
+
+      &.new {
+        &::before {
+          content: '+';
+          position: absolute;
+          left: 0.5em;
+        }
+
+        &.with-coverage::before {
+          left: 0;
+        }
+      }
+    }
+  }
+
+  .line_holder:last-of-type {
+    td:first-child {
+      border-bottom-left-radius: $border-radius-default;
+    }
+  }
+
+  &.left-side-selected {
+    td.line_content.parallel.right-side {
+      user-select: none;
+    }
+  }
+
+  &.right-side-selected {
+    td.line_content.parallel.left-side {
+      user-select: none;
+    }
+  }
+}
+
+.diff-stats {
+  align-items: center;
+  padding: 0 1rem;
+
+  .diff-stats-group {
+    padding: 0 0.25rem;
+  }
+
+  svg.diff-stats-icon {
+    vertical-align: text-bottom;
+  }
+
+  &.is-compare-versions-header {
+    .diff-stats-group {
+      padding: 0 0.25rem;
+    }
+  }
+}
+
+.file-content .diff-file {
+  margin: 0;
+  border: 0;
+}
+
+.diff-wrap-lines .line_content {
+  white-space: pre-wrap;
+}
+
+.inline-parallel-buttons {
+  float: right;
+}
+
+.files-changed {
+  border-bottom: 0;
+}
+
+.merge-request-details .file-content.image_file img {
+  max-height: 50vh;
+}
+
+.diff-stats-summary-toggler {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+  color: $blue-600;
+  font-weight: $gl-font-weight-bold;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    color: $blue-800;
+  }
+
+  .caret-icon {
+    position: relative;
+    top: 2px;
+    left: -1px;
+  }
+}
+
+// Mobile
+@media (max-width: 480px) {
+  .diff-title {
+    margin: 0;
+
+    .file-mode {
+      display: none;
+    }
+  }
+
+  .diff-controls {
+    position: static;
+    text-align: center;
+  }
+}
+
+// Bigger screens
+@media (min-width: 481px) {
+  .diff-title {
+    margin-right: 200px;
+
+    .file-mode {
+      margin-left: 10px;
+    }
+  }
+
+  .diff-controls {
+    float: right;
+    position: absolute;
+    top: 5px;
+    right: 15px;
+  }
+}
+
+.files {
+  .diff-file:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.diff-comment-avatar-holders {
+  position: absolute;
+  margin-left: -$gl-padding;
+  z-index: 100;
+  @include code-icon-size();
+
+  &:hover {
+    .diff-comment-avatar,
+    .diff-comments-more-count {
+      @for $i from 1 through 4 {
+        $x-pos: 14px;
+
+        &:nth-child(#{$i}) {
+          @if $i == 4 {
+            $x-pos: 14.5px;
+          }
+
+          transform: translateX((($i * $x-pos) - $x-pos));
+
+          &:hover {
+            transform: translateX((($i * $x-pos) - $x-pos));
+          }
+        }
+      }
+    }
+
+    .diff-comments-more-count {
+      padding-left: 2px;
+      padding-right: 2px;
+      width: auto;
+    }
+  }
+}
+
+.diff-comment-avatar,
+.diff-comments-more-count {
+  position: absolute;
+  left: 0;
+  margin-right: 0;
+  border-color: $white;
+  cursor: pointer;
+  transition: all 0.1s ease-out;
+  @include code-icon-size();
+
+  @for $i from 1 through 4 {
+    &:nth-child(#{$i}) {
+      z-index: (4 - $i);
+    }
+  }
+
+  .avatar {
+    @include code-icon-size();
+  }
+}
+
+.diff-comments-more-count {
+  padding-left: 0;
+  padding-right: 0;
+  overflow: hidden;
+  @include code-icon-size();
+}
+
+.diff-comments-more-count,
+.diff-notes-collapse {
+  @include avatar-counter(50%);
+}
+
+.diff-notes-collapse {
+  border: 0;
+  border-radius: 50%;
+  padding: 0;
+  transition: transform 0.1s ease-out;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  @include code-icon-size();
+
+  .collapse-icon {
+    height: 50%;
+    width: 100%;
+  }
+
+  svg {
+    vertical-align: middle;
+  }
+
+  .collapse-icon,
+  path {
+    fill: $white;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.diff-files-changed {
+  .inline-parallel-buttons {
+    position: relative;
+    z-index: 1;
+  }
+
+  .commit-stat-summary {
+    @include media-breakpoint-up(sm) {
+      margin-left: -$gl-padding;
+      padding-left: $gl-padding;
+      background-color: $white;
+    }
+  }
+
+  @include media-breakpoint-up(sm) {
+    position: -webkit-sticky;
+    position: sticky;
+    top: $header-height;
+    background-color: $white;
+    z-index: 200;
+
+    .with-performance-bar & {
+      top: $header-height + $performance-bar-height;
+    }
+
+    &.is-stuck {
+      padding-top: 0;
+      padding-bottom: 0;
+      border-top: 1px solid $white-dark;
+      border-bottom: 1px solid $white-dark;
+
+      .diff-stats-additions-deletions-expanded,
+      .inline-parallel-buttons {
+        display: none !important;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    &.is-stuck {
+      .diff-stats-additions-deletions-collapsed {
+        display: block !important;
+      }
+    }
+  }
+}
+
+.diff-file-changes {
+  max-width: 560px;
+  width: 100%;
+  z-index: 150;
+  min-height: $dropdown-min-height;
+  max-height: $dropdown-max-height;
+  overflow-y: auto;
+  margin-bottom: 0;
+
+  @include media-breakpoint-up(sm) {
+    left: $gl-padding;
+  }
+
+  .dropdown-input .dropdown-input-search {
+    pointer-events: all;
+  }
+
+  .diff-changed-file {
+    display: flex;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    min-width: 0;
+  }
+
+  .diff-file-changed-icon {
+    margin-top: 2px;
+  }
+
+  .diff-changed-file-content {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .diff-changed-file-name,
+  .diff-changed-blank-file-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .diff-changed-blank-file-name {
+    color: $gl-text-color-tertiary;
+    font-style: italic;
+  }
+
+  .diff-changed-file-path {
+    color: $gl-text-color-tertiary;
+  }
+
+  .diff-changed-stats {
+    margin-left: auto;
+    white-space: nowrap;
+  }
+}
+
+.diff-file-changes-path {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.note-container {
+  background-color: $gray-light;
+  border-top: 1px solid $white-normal;
+
+  // double jagged line divider
+  .discussion-notes + .discussion-notes::before,
+  .diff-file-discussions + .discussion-form::before {
+    content: '';
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 10px;
+    background-color: $white;
+    background-image: linear-gradient(45deg,
+    transparent,
+    transparent 73%,
+    $diff-jagged-border-gradient-color 75%,
+    $white 80%),
+      linear-gradient(225deg,
+    transparent,
+    transparent 73%,
+    $diff-jagged-border-gradient-color 75%,
+    $white 80%),
+      linear-gradient(135deg,
+    transparent,
+    transparent 73%,
+    $diff-jagged-border-gradient-color 75%,
+    $white 80%),
+      linear-gradient(-45deg,
+    transparent,
+    transparent 73%,
+    $diff-jagged-border-gradient-color 75%,
+    $white 80%);
+    background-position: 5px 5px, 0 5px, 0 5px, 5px 5px;
+    background-size: 10px 10px;
+    background-repeat: repeat;
+  }
+
+  .diff-file-discussions + .discussion-form {
+    padding: $gl-padding;
+
+    &::before {
+      width: auto;
+      margin-left: -$gl-padding;
+      margin-right: -$gl-padding;
+      margin-bottom: $gl-padding;
+    }
+  }
+
+  .notes {
+    position: relative;
+  }
+
+  .diff-notes-collapse {
+    position: absolute;
+    left: -12px;
+  }
+}
+
+.diff-file .note-container > .new-note,
+.note-container .discussion-notes.diff-discussions {
+  margin-left: 100px;
+  border-left: 1px solid $white-normal;
+}
+
+.notes.active {
+  .diff-file .note-container > .new-note,
+  .note-container .discussion-notes {
+    // Override our margin and border (set for diff tab)
+    // when user is on the discussion tab for MR
+    margin-left: inherit;
+    border-left: inherit;
+  }
+}
+
+.files:not([data-can-create-note]) .frame {
+  cursor: auto;
+}
+
+.frame.click-to-comment,
+.btn-transparent.image-diff-overlay-add-comment {
+  position: relative;
+  cursor: image-url('illustrations/image_comment_light_cursor.svg') $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
+    auto;
+
+  // Retina cursor
+  // scss-lint:disable DuplicateProperty
+  cursor: image-set(image-url('illustrations/image_comment_light_cursor.svg') 1x,
+  image-url('illustrations/image_comment_light_cursor@2x.svg') 2x) $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
+    auto;
+
+  .comment-indicator {
+    position: absolute;
+    padding: 0;
+    width: (2px * $image-comment-cursor-left-offset);
+    height: (2px * $image-comment-cursor-top-offset);
+    color: $blue-400;
+    // center the indicator to match the top left click region
+    margin-top: (-1px * $image-comment-cursor-top-offset) + 2;
+    margin-left: (-1px * $image-comment-cursor-left-offset) + 1;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.frame .badge.badge-pill,
+.image-diff-avatar-link .badge.badge-pill,
+.user-avatar-link .badge.badge-pill,
+.notes > .badge.badge-pill {
+  position: absolute;
+  background-color: $blue-400;
+  color: $white;
+  border: $white 1px solid;
+  min-height: $gl-padding;
+  padding: 5px 8px;
+  border-radius: 12px;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.frame .badge.badge-pill,
+.frame .image-comment-badge,
+.frame .comment-indicator {
+  // Center align badges on the frame
+  transform: translate(-50%, -50%);
+}
+
+.image-comment-badge {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: none;
+  border: 0;
+
+  > svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.image-diff-avatar-link,
+.user-avatar-link {
+  position: relative;
+
+  .badge.badge-pill,
+  .image-comment-badge {
+    top: 25px;
+    right: 8px;
+  }
+}
+
+.notes > .badge.badge-pill {
+  display: none;
+  left: -13px;
+}
+
+.discussion-notes {
+  min-height: 35px;
+
+  &:first-child {
+    // First child does not have the jagged borders
+    min-height: 25px;
+  }
+
+  &.collapsed {
+    background-color: $white;
+
+    .diff-notes-collapse,
+    .note,
+    .discussion-reply-holder {
+      display: none;
+    }
+
+    .notes > .badge.badge-pill {
+      display: block;
+    }
+  }
+
+  .note-edit-form {
+    margin-left: $note-icon-gutter-width;
+  }
+}
+
+.discussion-body .image .frame {
+  position: relative;
+}
+
+.discussion-collapsible {
+  margin: 0 $gl-padding $gl-padding 71px;
+
+  .notes {
+    border-radius: $border-radius-default;
+  }
+}
+
+.parallel {
+  .discussion-collapsible {
+    margin: $gl-padding;
+    margin-top: 0;
+  }
+}
+
+.image-diff-overlay,
+.image-diff-overlay-add-comment {
+  top: 0;
+  left: 0;
+
+  &:active,
+  &:focus {
+    outline: 0;
+  }
+}
+
+.diff-suggest-popover {
+  &.popover {
+    width: 250px;
+    min-width: 250px;
+    z-index: 210;
+  }
+
+  .popover-header {
+    display: none;
+  }
+}
+
+@media (max-width: map-get($grid-breakpoints, md)-1) {
+  .diffs .files {
+    @include fixed-width-container;
+    flex-direction: column;
+  }
+
+  .discussion-collapsible {
+    margin: $gl-padding;
+    margin-top: 0;
+  }
+}