Improve Spright chat message sizing for wide content

[jattasNI]

Pull Request

🤨 Rationale

Fixes #2607. Also addresses an issue where clients setting max-width on a message wasn't respected, causing content to grow the width of the conversation and show a horizontal scrollbar and whitespace.

👩‍💻 Implementation

The end result is that messages will default to never being wider than the conversation and the message (rather than the conversation) will show a horizontal scrollbar if their content is too wide. Clients can now configure what the max-width is if they want different behavior.

Changes to achieve this:

On all message types,

1. Move max-width styling from a shadow DOM container to :host, allowing clients to set it.
   • Also change from calc(90%) to 90% because they are equivalent.
   • Also add align-self styling because this caused some inbound messages to no longer be right aligned. align-self is a better way to align an item within its container.
2. add max-width: 100% to the message-content element and width: 100% to the container element. This prevents messages with wide content from growing beyond the message max-width.

On inbound message, change initial max-width to 100% as requested in #2607 and I agree in SystemLink it looks better for wide content like tables.

🧪 Testing

In storybook you can see all messages (except the deprecated chat-message) now respect the max-width and show a horizontal scrollbar.

I see the same thing in a markdown table in SystemLink:

✅ Checklist

• I have updated the project documentation to reflect my changes or determined no changes are needed.

[rajsite]

Dunno if we need any additional confirmation but my understanding is this component is ready to delete / unmaintained. Example, was not included as part of auto scroll support: #2975 (comment)

[jattasNI]

It is deprecated but some repos are still using it. But yeah probably best just to leave it untouched. https://github.com/search?q=repo%3Ani%2Ftesthub+spright-chat-message&type=code

[rajsite]

If you are out here tweaking the styles a bit, would be great to enable scrollbar gutters in scrollable containers

#2975 (comment)