bug(MatSnackBar): Long message leads to action button getting detached from snackbar

[rhofour]

Reproduction

Screenshot: https://i.imgur.com/YZnHIiR.jpg

Steps to reproduce:

1. https://material.angular.io/components/snack-bar/overview
2. Type a long message into the message field
3. Hit show snack-bar

Expected Behavior

What behavior were you expecting to see?
Message would overflow or wrap, but with the button still as part of the snack bar.

Actual Behavior

What behavior did you actually see?
The message is cut off, but then there's significant blank space before the button shows.
It's easy to miss the button here since it's separate from the background.

Environment

• Angular: 11
• CDK/Material: 11.1.0
• Browser(s): Chrome 87
• Operating System (e.g. Windows, macOS, Ubuntu): Fedora

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}