Show usernames in Reacted popover

[Don]

@_diondiondion

At least to me, the whole point of the popover is to get a quick overview of the reactions given. I don’t want to have to click into each user’s card to find out their name.

Actually on desktop when you hover the reaction it list the users.

---

If anyone else wants this

Common / CSS

.discourse-reactions-counter {
  .discourse-reactions-state-panel {
    &.is-expanded {
      max-width: 500px;
    }
    .discourse-reactions-state-panel-reaction {
      margin-left: 0 !important;
      .list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25em;
        .trigger-user-card {
          margin-left: 0;
          width: max-content;
          height: auto;
          color: var(--primary-high);
          position: relative;
          &:before {
            // Set the username from data-user-card attribute
            // and add a comma next to username
            content: attr(data-user-card) ",";
          }
          .avatar {
            opacity: 0;
            position: absolute;
          }
          &:last-child {
            &:before {
              // Remove the comma from the last username
              content: attr(data-user-card);
            }
          }
        }
        button.show-users {
          order: 1; // Order the arrow to the end of list
        }
      }
    }
  }
}