Fluent: allow message bubble to grow past 450px up to 75%

[OEvgeny]

Fixes #

Changelog Entry

• Improved message bubble layout in Fluent theme to allow growth beyond 450px up to 75% of container width, in PR #5324, by @OEvgeny

Description

This PR enhances the message bubble layout in the Fluent theme for Web Chat. It allows message bubbles to grow beyond the previous fixed maximum width of 450px, up to 75% of their container width as well as passing --bubble-minWidth from the outside. As the theme design suggests it affects only bot message.

Design

The idea is simple to allow further grow past 450px only if container has the width available. By adjusting min-width from the outside developers can limit the minimum message width.

Specific Changes

• Updated ActivityDecorator.module.css:
  • Modified --webchat-bubble-maxWidth to use min(max(450px, 75%), 100%).
  • Introduced --webchat-bubble-minWidth variable.
  • Adjusted max-width and min-width properties for message bubbles.
  • Updated width property for latency loader to maintain consistency.

-

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)