requesting "Chat log" component revision for chat bubbles to hug content

[dreamealist]

Hi Paste team, @loreina @serifluous @SiTaggart
I'm a product designer for Conversations API and working on a new "try it out" feature in Console where customers can try out 2-way messaging on WhatsApp with Conversations API.
Below is one of the key screens I'm designing, which incorporates the chat ui into the sandbox. As you can see, I'm using the new "chat log" component recently released from Paste. You can see below that I made a bit of revision to the chat bubbles to hug the content instead of maintaining full widths.

vs.

The issue I encountered while using the original chat log component is that the chat bubbles are stretched side to side as a "fill container" is applied. I assume it is because it was originally designed for a smaller intercom-like chat window.
For the larger screen width, it becomes too long, and it leaves extra space.
If you see iMessage, WhatsApp, and other messengers, chat bubbles also wrap the content up to certain width so that there is a clearer visual separation between messages from senders and recipients. (See attached examples.)

Can we make the bubble wrap the content, so it doesn't have a long width by default? If you have other rationales behind it, please let me know!

[loreina]

Hi @dreamealist,

Thanks for bringing this to our attention. I created a ticket in our backlog to update the code for the bubble to hug the text when on a single line. Someone on our team will update here once that fix is in.

As for in Figma, unfortunately it's not possible to have the chat bubble hug the text on the first line and also wrap to the next line at a fixed width. Our suggestion is for you to update the bubbles that are a single line to hug. Here's a Loom video on how to change the horizontal resizing. However, by doing this, when using the Chat Log component inside the Minimizable Dialog, components may get cut off.

[serifluous]

Thanks for coming to office hours! Here's the recording: https://www.loom.com/share/12a2219a84544b1b9d6d4c4b801675e5

You can find the password in #help-design-system (it's the same as past recordings).

[nkrantz]

Hi @dreamealist - this work was completed in #2693.