Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Oct 9, 2024

Conversation

OEvgeny
Copy link
Collaborator

@OEvgeny OEvgeny commented Oct 9, 2024

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)

@OEvgeny OEvgeny marked this pull request as ready for review October 9, 2024 22:48
@compulim compulim enabled auto-merge (squash) October 9, 2024 23:43
@compulim compulim merged commit ef5bda6 into main Oct 9, 2024
27 checks passed
@compulim compulim deleted the feat/fluent-fluid-buble branch October 9, 2024 23:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants