Show ellipsis for long Message variable values

[jakubjanczyk]

Problem/Feature

There was an issue with long variable value inserted into MessageCard - it was going out of the right edge of a card, like here:

The solution is to limit the width of the variable pill to up to 50% of the available width within a card and to show ellipsis is there are more characters than displayed:

Use MessageCard -> With variables story to see example

Guidelines

Make sure the pull request:

• [ ] Follows the established folder/file structure
• [ ] Adds unit tests
• [ ] If it is a refactor or change to an existing component, have you verified it won't break existing Cypress tests or have you updated them?
• [ ] Did you verify some accessibility (a11y) basics?
• [ ] Adds/updates stories. Guidelines
• [ ] Adds/updates documentation (ie proptypes) Guidelines
• [ ] Has it been tested in Help Scout's supported browsers?
• [ ] Requests review from designer of the feature
• [ ] Add label (bug? feature?)

[cloudflare-workers-and-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	a5f2a31
Status:	✅  Deploy successful!
Preview URL:	https://c3df296f.hsds-react.pages.dev

View logs