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:

I changed one matrix story to include the conversation so that message positioning still worked.

✅ Checklist

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

[rajsite]

The message scrollbars in Windows Chrome clip the border of messages a bit (went in devtools and removed the outline that the story itself adds for the screenshot):

[jattasNI]

I'm not sure what to do here and I'm open to inputs from regular Windows users about what would feel natural. On mac the overlay scrollbars tend to be translucent and not permanently visible so I'm not sure what typical conventions are for cases like this.

Some options:

1. do nothing because, at the moment, outbound messages are the only ones with a border/background and all clients currently only populate them with text content which wraps rather than overflows
2. inset the scrollbar something like in the screenshot below. I achieved this by moving the border/background rendering to the outer container, keeping the scrollbar on the inner content, and adding padding between them.
3. other ideas?