soapbox/app/styles/components/profile_hover_card.scss

.display-name__account {
  position: relative;
  cursor: pointer;
}

.display-name .profile-hover-card {
  white-space: normal;
}

.profile-hover-card {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-delay: 0.7s;
  width: 265px;
  z-index: 998;
  left: -10px;
  padding-top: 20px;
  margin-bottom: 10px;

  &--visible {
    opacity: 1;
    pointer-events: all;
  }

  @media(min-width: 750px) {
    left: -80px;
  }

  .profile-hover-card__container {
    @include standard-panel;
    position: relative;
    overflow: hidden;
  }

  .profile-hover-card__action-button {
    z-index: 999;
    position: absolute;
    right: 20px;
    top: 120px;
  }

  .user-panel {
    box-shadow: none;
    width: auto;

    .user-panel-stats-item a strong {
      text-decoration: none;
    }
  }

  .relationship-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
  }

  .profile-hover-card__badges {
    margin: 0 20px 20px;
    display: flex;

    .badge {
      padding: 2px 4px;
      margin-right: 5px;
      border-radius: 3px;
      font-size: 11px;
      opacity: 1;
    }
  }

  .profile-hover-card__bio {
    margin: 0 20px 20px;
  }
}

.detailed-status {
  .profile-hover-card {
    top: 0;
    left: 80px;
  }
}