.Connection
  display block
  collapsed-margins(0.5em)
  border 2px solid
  cursor pointer

  title-width = 65%

  > span
    display flex
    align-items center
    justify-content space-between
    padding button-padding

  &__title
    max-width title-width
    font-size font-size-base
    line-height line-height-base
    ellipsis(title-width)

    > span
      font-size font-size-xs

  &__author
    font-size font-size-xs
    line-height line-height-base
    ellipsis(100% - title-width)

  for visibility in 'public' 'closed' 'private'
    &[data-visibility=\'{visibility}\']
      color lookup('colors-channel-' + visibility)
      border-color rgba(@color, colors-border-alpha)
      &:hover
        border-color @color

  &[data-visibility='placeholder']
    cursor default
    color colors-gray-light
    border-color rgba(@color, colors-border-alpha)
    &:hover
      border-color @color

.Connection
  display block
  collapsed-margins(0.5em)
  border 2px solid
  cursor pointer

  > span
    display flex
    align-items center
    justify-content space-between
    padding button-padding

  &__title
  &__author
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
    max-width 75%

  &__title
    flex 1
    font-size font-size-base
    line-height line-height-base
    margin-right 0.5em

    > span
      font-size font-size-xs

  &__author
    font-size font-size-xs
    line-height line-height-base

  for visibility in 'public' 'closed' 'private'
    &[data-visibility=\'{visibility}\']
      color lookup('colors-channel-' + visibility)
      border-color rgba(@color, colors-border-alpha)
      &:hover
        border-color @color

  &[data-visibility='placeholder']
    cursor default
    color colors-gray-light
    border-color rgba(@color, colors-border-alpha)
    &:hover
      border-color @color

Make better use of space in connection representation
Make better use of space in connection representation
