Small TBP icons are overwriting forum titles

As the screen shot below shows, small TBP icons are overwriting forum titles (e.g., “esponses” in the top post):

1 Like

The issue appears to be from this section in “categories-topic-list.scss”

.topic-avatar .avatar-flair,
.avatar-flair-preview .avatar-flair,
.collapsed-info .user-profile-avatar .avatar-flair,
.user-image .avatar-flair,
.latest-topic-list-item .avatar-flair {
  background-size: 20px 20px;
  width: 20px;
  height: 20px;

  &.rounded {
    background-size: 18px 18px;
    border-radius: 12px;
    width: 24px;
    height: 24px;
    bottom: -2px;
    right: -8px;
  }
}

Removing those 4 last lines would fix the problem and make flair more consistent site-wide:

  &.rounded {
    background-size: 18px 18px;
    border-radius: 12px;
  }

image

This would match other Discourse boards, like the Ubuntu forums for example:

1 Like

Thank you for highlighting this @Rich_Morin and thank you for the detailed investigation and suggested fix @AgentRev
I updated the css and it looks good on my side now. Let me know if you still see strange overlaps.

  • Viviane