Add forced border-box to Adaptive Cards

[compulim]

Fixes #4075.

Changelog Entry

Fixed

• Fixes #4075. Added box-sizing: border-box to all descendants under Adaptive Cards, by @compulim, in PR #4084

Description

Adaptive Cards team assume the host is running in "forced border-box" mode, which means all DOM descendants has box-sizing: border-box rule set. Adaptive Cards Designer applied this CSS rule:

#designerRootHost * {
  box-sizing: border-box;
}

However, Web Chat is a UI component and we cannot assume our hosting environment has specific non-default values set. The default value in CSS is a non-inheritable box-sizing: content-box.

Thus, we are adding "forced border-box" mode only for Adaptive Card:

.webchat__adaptive-card-renderer * {
  box-sizing: border-box;
}

As the CSS rule is not trivial to unset and deeply polluting, this work will restrict us from extending Adaptive Card. However, we have no plans to extend Adaptive Cards.

In case there is a requirement to extend Adaptive Cards in the future, we must bring this issue up to Adaptive Cards team again, and ask them to fix the root cause before we or our web devs could implement any Adaptive Card extensions.

Design

After talking to David from Adaptive Cards team, he asked us to put the Adaptive Card container in "forced border-box" mode.

Specific Changes

• Add .webchat__adaptive-card-renderer * { box-sizing: border-box; } rule
• Also fixed our Docker watch script to watch for bundle build under /packages/bundle/dist, where webchat*.js is located

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