GlAvatarInline calculating size doesn't factor in the badge when collapsed

When calculating the size of the container, GlAvatarInline calculates the width based upon the number of allowed avatars. However, we should also be considering the badge that is shown when collapsed as adds an additional 75% of the avatar icon size to the container. As badges themselves should be the same size as the avatars, it should be a simple solution of just +1 to the this.visibleAvatars.length when collapsed && collapsable is true.

Something like:

containerSizeStyles() {
  const { avatarSize, collapsable, collapsed, visibleAvatars } = this;
  let numOfAvatarsUsed = visibleAvatars.length;

  // Add one more for the badge if it is going to be shown
  if (collapsed && collapsable) {
    numOfAvatarsUsed += 1;
  }

  return {
    width: `${this.avatarSize * numOfAvatarsUsed}px`,
    height: `${avatarSize}px`,
  };
},

This currently causes the GlAvatarInline to be off by this missing size when viewed in a right-aligned context.

Current outcome	Proposed outcome