Inconsistent structure of message bubbles

[ilyakonrad]

Real message bubbles and quoted message bubbles (the ones you see when replying to a message) implement line-breaks differently. More specifically there are <br> elements in the quoted bubble text, which you won't find in the real message bubbles.

This breaks the consistency of styles, since it changes spacings, especially when line-height is applied.

You can see how effective line height is different between the real message bubble and the quoted bubble.

The same can be observed in the demo application, though the difference is not as drastic given the lack of line-height rule.

[szuperaz]

Thanks for reporting the issue, I can't provide an expected time for the fix. However, I believe that this workaround should solve the issue in the meantime:

// Solving 1.
.str-chat__message {
  .str-chat__quoted-message-bubble {
    br {
      display: none;
    }
  }
}

// Solving 2.
.str-chat__quoted-message-bubble {
  br {
    line-height: 0;
  }
}

[ilyakonrad]

Thanks!

This seems to have fixed both cases at once.

.str-chat__quoted-message-bubble {
  br {
    display: none;
  }
}

It required having the same line-height though, but it makes sense anyway, since bubbles look the same.

[github-actions]

🎉 This issue has been resolved in version 5.12.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀