Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inconsistent structure of message bubbles #658

Open
ilyakonrad opened this issue Nov 1, 2024 · 2 comments
Open

Inconsistent structure of message bubbles #658

ilyakonrad opened this issue Nov 1, 2024 · 2 comments

Comments

@ilyakonrad
Copy link

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
Copy link
Contributor

szuperaz commented Nov 4, 2024

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants