GetStream / stream-chat-angular

💬 Angular Chat SDK ➜ Stream Chat. Build a chat app with ease.
https://getstream.io/chat/sdk/angular/
53 stars 32 forks source link

Inconsistent structure of message bubbles #658

Open ilyakonrad opened 3 weeks ago

ilyakonrad commented 3 weeks ago

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.

image image

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.

image

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

image image

szuperaz commented 2 weeks ago

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;
  }
}

Screenshot 2024-11-04 at 17 15 06

ilyakonrad commented 2 weeks ago

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.