$avatarSize: 32px;

.annotation {
  position: relative;
  min-height: $avatarSize;
}

.annotation-avatar-container {
  @extend %centering;

  position: absolute;
  left: 0;
  top: 0;

  width: $avatarSize;
  height: $avatarSize;
  border: 1px lightgrey solid;
  border-radius: $baseBorderRadius;
  background: white;
}

.annotation-avatar {
  @extend %centering-inner;
  max-width: $avatarSize;
  max-height: $avatarSize;
}

.annotation-balloon {
  margin-left: $avatarSize + 10px;
  background: $lightYellow;
  word-wrap: break-word;
  display: inline-block;
  padding: 5px 8px;
  border-radius: $baseBorderRadius;
  position: relative;

  &:before {
    content: '';

    position: absolute;
    left: -$triangleSize;
    top: $avatarSize/2 - $triangleSize;

    width: 0;
    height: 1px;
    border: $triangleSize solid transparent;
    border-left: none;
    border-right-color: $lightYellow;
  }
}

.annotation-host {
  font-weight: $baseFontBoldWeight;
}

$avatarSize: 32px;

.annotation {
  position: relative;
  min-height: $avatarSize;
}

.annotation-avatar-container {
  @extend %centering;

  position: absolute;
  left: 0;
  top: 0;

  width: $avatarSize;
  height: $avatarSize;
  border: 1px lightgrey solid;
  border-radius: $baseBorderRadius;
  background: white;
}

.annotation-avatar {
  @extend %centering-inner;
  max-width: $avatarSize;
  max-height: $avatarSize;
}

.annotation-balloon {
  margin-left: $avatarSize + 10px;
  background: $lightYellow;
  word-wrap: break-word;
  display: inline-block;
  padding: 5px 8px;
  border-radius: $baseBorderRadius;
  position: relative;

  &:before {
    content: '';

    position: absolute;
    left: -$triangleSize;
    top: $avatarSize/2 - $triangleSize;

    width: 0;
    height: 1px;
    border: $triangleSize solid transparent;
    border-left: none;
    border-right-color: $lightYellow;
  }
}

.annotation-host {
  font-weight: $baseFontBoldWeight;
  word-break: break-all;
}

Break long url's in feed
Break long url's in feed
