discourse/app/assets/stylesheets/common/admin/flagging.scss

.flagged-post.hidden-post {
  .flagged-post-excerpt,
  .flagged-post-avatar {
    opacity: 0.5;
  }
}

.flagged-post.deleted {
  .flagged-post-excerpt,
  .flagged-post-avatar {
    background-color: $danger-low;
  }
}

.flagged-post {
  padding: 1em 0 0.55em 0;
  border-bottom: 1px solid $primary-low;

  .flagged-post-details {
    display: flex;

    .flagged-post-avatar {
      position: relative;
      margin-right: 10px;

      img.avatar {
        min-width: 45px;
      }

      .edited-after {
        text-align: center;
        margin-top: 0.5em;
      }

      .previous-flagged-posts {
        position: absolute;
        right: -5px;
        top: -5px;
        background-color: $danger;
      }
    }

    .flagged-post-contents {
      width: calc(100% - 55px);
      word-wrap: break-word;

      .flagged-post-user-details {
        display: flex;
        justify-content: space-between;

        .username {
          font-weight: bold;
          color: $primary;
        }
        margin-bottom: 0.5em;
      }

      .d-icon {
        display: inline-block;
      }
      h3 {
        margin-top: 0;
        margin-bottom: 0.5em;
      }
      p:last-child {
        margin-bottom: 0;
      }
    }
  }

  .flagged-post-reply-count {
    font-weight: normal;
  }

  .flag-user-lists {
    display: flex;
    align-items: flex-start;
    margin-top: 1em;
  }

  .user-list-title {
    font-weight: bold;
    margin: 0;
  }

  .flag-users {
    margin: 0.5em 0;
    display: flex;
    flex-wrap: wrap;
  }

  .flag-user {
    display: flex;
    margin-bottom: 1em;
    margin-right: 2em;
    align-items: center;
    justify-content: space-between;

    .flag-user-who {
      display: flex;
      width: 13em;
    }
    .flag-user-username {
      font-weight: bold;
      margin-right: 0.5em;
    }
    .flag-user-date {
      color: $primary-medium;
    }
    .flag-user-avatar {
      margin-right: 0.5em;
    }
    .flag-user-extra {
      display: flex;
      align-items: center;

      .user-flag-percentage {
        display: flex;
        align-items: center;
        margin-left: 0.5em;

        .percentage-label {
          margin-right: 0.25em;
          &.agreed {
            color: $success;
          }
          &.disagreed {
            color: $danger;
          }
          &.ignored {
            color: $primary-medium;
          }
        }
      }
    }
  }

  .flag-conversation {
    padding: 1em 0;

    .reply-conversation {
      margin-left: 32px;
    }
  }

  .suspended-message {
    padding: 0.5em;
    background-color: $danger;
    margin-bottom: 1em;
    color: $secondary;
  }

  .flagged-post-message {
    padding: 0.5em 1em;
    margin: 0.5em 0;
    background-color: $highlight-medium;

    .text {
      margin-right: 1em;
    }

    &:hover {
      background-color: dark-light-choose($highlight-low, $highlight-medium);
    }
  }

  .flagged-post-response {
    display: flex;
    align-items: center;
    margin-bottom: 0.5em;

    .response-avatar {
      margin-right: 0.5em;
    }

    .has-more {
      margin-left: 1em;
    }
  }

  .flagged-post-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;

    button {
      margin-right: 0.5em;
      margin-bottom: 0.5em;
    }
  }
}

.flag-counts {
  display: inline-block;
  margin-right: 0.5em;

  .type-count {
    color: $primary-medium;
    font-size: $font-down-1;
  }
}

.flagged-topic {
  td.topic-title {
    width: 400px;
    a {
      width: 400px;
      display: inline-block;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
  @include breakpoint(tablet) {
    td.topic-title {
      width: auto;
      max-width: 600px;
      a {
        width: auto;
        white-space: unset;
      }
    }
  }
}

.flagged-topic-details {
  display: flex;
  justify-content: space-between;
}

.mobile-view {
  .flagged-posts {
    overflow: hidden;
    .flagged-post {
      .flag-user-lists {
        display: block;
      }
    }
  }
}

.show-details {
  .d-icon {
    padding-right: 0.25em;
  }
}

.admin-contents table.grid {
  @media screen and (max-width: 767px) {
    tr.flagged-topic {
      grid-template-columns: 0.25fr 1fr 1fr;
      td.topic-title {
        grid-column-start: 2;
        grid-column-end: -2;
        min-width: 0;
        align-self: start;
      }
      td.last-flagged {
        grid-row: 1;
        grid-column-end: -1;
        text-align: right;
        align-self: start;
      }
      td.flag-details {
        grid-row: 2;
        grid-column-end: -1;
        text-align: right;
      }
      td.flagged-topic-users {
        grid-row: 1;
        grid-column-start: 1;
        max-width: 60px;
        align-self: start;
        a {
          display: inline-block;
          margin: 0 0.25em 0.25em 0;
        }
      }
      td.flag-counts {
        grid-row: 2;
        grid-column-start: 2;
      }
    }
  }
  //IE11 Support
  @media screen and (max-width: 767px) {
    tr.flagged-topic {
      display: -ms-grid;
      -ms-grid-columns: 0.25fr 1fr 1fr;
      -ms-grid-rows: auto auto;
      td {
        display: -ms-grid;
        &.flagged-topic-users {
          -ms-grid-row: 1;
          -ms-grid-column: 1;
          -ms-grid-column-span: 1;
        }
        &.topic-title {
          -ms-grid-row: 1;
          -ms-grid-column: 2;
        }
        &.last-flagged {
          -ms-grid-row: 1;
          -ms-grid-column: 3;
        }
        &.flag-counts {
          -ms-grid-row: 2;
          -ms-grid-column: 2;
        }
        &.flag-details {
          -ms-grid-row: 2;
          -ms-grid-column: 3;
        }
      }
    }
  }
}