Fixes reaction row rendering out of view on message bubbles

[yaya-usman]

Fixes: vector-im/element-web#22093

Issue reported by @frakic

Signed-off-by: Yaya Usman [email protected]

Before:

After:

Type: defect

---

Here's what your changelog entry will look like:

🐛 Bug Fixes

• Fixes reaction row rendering out of view on message bubbles (#8542). Contributed by @yaya-usman.

[SimonBrandner]

I am confused - does this make the emojis go in two lines with the second one being indented from the right?

[yaya-usman]

I am confused - does this make the emojis go in two lines with the second one being indented from the right?

Apparently yes, when the size of the screen is shrinked to a smaller width, it just wraps the emojis or confine the emojis inside its container instead of going off screen. I think the original issue explains the problem better.

[SimonBrandner]

I am confused - does this make the emojis go in two lines with the second one being indented from the right?

Apparently yes, when the size of the screen is shrinked to a smaller width, it just wraps the emojis or confine the emojis inside its container instead of going off screen. I think the original issue explains the problem better.

I think we would want a full fix for the issue before merging - avoid the wrapping and avoid them going off-screen - they should behave the same way they do on the Modern layout. Do you think you could try to take a look into that?

[yaya-usman]

@SimonBrandner check this out, i just updated the code and it seems to work fine like the modern layout maybe this is what you're implying, i want to confirm before pushing my changes.

Modern chat layout

Bubble chat layout

[SimonBrandner]

This is much better! One more thing - do you think it would be possible to show all the reactions on one line and if they were to overflow, show the Show all button?

[SimonBrandner]

Clearing team review for now - please re-request review when ready

[yaya-usman]

This is much better! One more thing - do you think it would be possible to show all the reactions on one line and if they were to overflow, show the Show all button?

To be honest i don't know if it's possible but this is the default behavior of element web, it includes show all if the emojis is getting many, and i think it's more logical that way, it's not like it includes show all at the beginning, it does only when the emojis starts to become many. so i don't really find any reason to list out all the emojis and try to include show all when it overflows. Also if we decide to do it as you have stated, the emojis will get longer than the bubble width, i mean it will longer than the chat bubble in width, which will make it look awkward. This is what i think

[yaya-usman]

[SimonBrandner]

Sorry, I don't think I was very clear...

What I was suggesting was a behaviour very similar to the above. But we wouldn't wrap - once the emoji list would get too long we would show the Show all button instead of wrapping.

Would that be possible?

[yaya-usman]

I think i understand you now, Let me try and see if i can come up with anything based on my understanding if not, i might ask for more clearance from you, thanks

[luixxiul]

Since the issue has been fixed, I think this PR can be closed.

[SimonBrandner]

Since the issue has been fixed, I think this PR can be closed.

Closing as per ^, thanks for tagging!