Fluent: fix classes clash between component and fluent packages

[OEvgeny]

Changelog Entry

• Resolved CSS class name conflicts between component and fluent packages to prevent styling issues, in PR #5326, by @OEvgeny

Description

This PR addresses a critical issue where CSS class names were clashing between the component and fluent packages in Web Chat. The conflict was causing unexpected styling behaviors and potential visual inconsistencies across different themes.

Design

The solution implements a more specific CSS selector strategy for decorator to ensure that styles are applied correctly without interfering with each other:

This fix is temporary. We are considering two potential long-term solutions:

1. Wait for upstream esbuild to resolve CSS clashes in a future update: add option to local-css to prefix minified classnames evanw/esbuild#3484
2. Switch to a different CSS modules implementation that provides better isolation

Once a more robust solution becomes available, we plan to revert the classes change.

Specific Changes

• Updated BorderFlair.module.css:
  • Added global class qualifiers to .border-flair and .border-flair--complete selectors
• Updated BorderLoader.module.css:
  • Added global class qualifiers to .border-loader, .border-loader__track, and .border-loader__loader selectors
• Updated ActivityDecorator.module.css in the fluent-theme package:
  • Increased specificity for .border-loader and .border-loader__track selectors

-

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

Review Checklist

• 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)