Skip to content

bug(snackbar): Snackbar message longer than viewport height becomes unreadable #31996

@mazeneko

Description

@mazeneko

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When a snackbar displays a message that exceeds the height of the viewport, the message overflows and becomes unreadable.

I understand that snackbars are generally intended for short messages and that very long messages should ideally be avoided. However, in cases where this does happen, it would be helpful if the content remained at least partially readable, for example by making the snackbar scrollable or wrapping the content appropriately.

Currently, as a workaround, we are using the following CSS:

.mat-mdc-snack-bar-label {
  max-height: 95dvh;
  overflow: auto;
}

Reproduction

Steps to reproduce:

  1. Trigger a snackbar with a very long message (longer than the viewport height).
  2. Observe that the message overflows and cannot be read.

Expected Behavior

The snackbar should handle long messages gracefully, allowing the user to read the full content.

Actual Behavior

The snackbar overflows the viewport and the content is unreadable.

Environment

  • Angular: 20.1.4
  • CDK/Material: 20.1.4
  • Browser(s): chrome 140.0.7339.208
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows

Metadata

Metadata

Assignees

Labels

P4A relatively minor issue that is not relevant to core functionsarea: material/snack-bar

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions