$avatar-size: 48px

=ellipsis
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.user-profile
  display: flex
  min-height: $avatar-size
  margin: $spacing 0 $spacing * 2 0
  width: 128px
  transition-duration: 150ms
  transition-property: all

  &__details
    flex: 1
    margin-left: 0.5em

  &__username
    +ellipsis
    height: 1.5em

  &__realname
    +ellipsis
    color: $mid-grey
    font-size: 0.75em
    height: 1.5em

  &__avatar
    border-radius: $border-radius
    height: $avatar-size
    margin: 0 auto
    overflow: hidden
    transition-duration: 150ms
    transition-property: all
    width: $avatar-size

    img
      width: 100%
      height: 100%

@media screen and (min-height: 700px)
  .user-profile
    flex-direction: column
    width: 96px

    &__avatar
      height: 96px
      width: 96px

$avatar-size: 48px

=ellipsis
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.user-profile
  display: flex
  min-height: $avatar-size
  margin: $spacing 0 $spacing * 2 0
  width: 128px
  transition-duration: 150ms
  transition-property: all

  &__details
    flex: 1
    margin-left: 0.5em
    min-width: 0

  &__username
    +ellipsis
    height: 1.5em

  &__realname
    +ellipsis
    color: $mid-grey
    font-size: 0.75em
    height: 1.5em

  &__avatar
    border-radius: $border-radius
    height: $avatar-size
    margin: 0 auto
    overflow: hidden
    transition-duration: 150ms
    transition-property: all
    width: $avatar-size

    img
      width: 100%
      height: 100%

@media screen and (min-height: 700px)
  .user-profile
    flex-direction: column
    width: 96px

    &__avatar
      height: 96px
      width: 96px

Work around weird Chrome flex/truncate bug
Work around weird Chrome flex/truncate bug

Thanks, @ItsJonQ! <3
