.has-avatar {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.name-after-avatar {
  flex: 1;
  display: flex;
  padding-left: .3rem;
}

.ui-avatar.gravatar > img {
  z-index: 1;
}

body.serenity .ui-avatar.gravatar {
  background-color: var(--avatar-background-color);
  vertical-align: middle;
  float: left;
  margin-right: .6rem;
  margin-top: .3rem;
  pointer-events: none;
}

body.serenity .name-after-avatar {
  margin-top: .4rem;
  padding-left: 0;
}