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

14

Description

This CSS rule https://github.com/angular/components/blame/01d5a9d12cad72a2c2bb6f71baf145d0ff4af13a/src/material/chips/chip.scss#L131 override MDC chip label overflow hidden to visible.

@crisbeto put this comment above the rule

  // MDC sets `overflow: hidden` on these elements in order to truncate the text. This is
  // unnecessary since our chips don't truncate their text and it makes it difficult to style
  // the strong focus indicators so we need to override it.
  .mdc-evolution-chip__cell--primary,
  .mdc-evolution-chip__action--primary,
  .mat-mdc-chip-action-label {
    overflow: visible;
  }

But by not truncating chip long text/label, we reduce it usability and get a weird appearance.

As you can see, on small devices, the chip is quiet broken and the trailing icon cannot be reached (which is terrible)

By just removing the CSS rule, we get the perfect behavior IMO

Reproduction

Steps to reproduce:

1. Go to https://material.angular.io/components/chips/examples
2. Reduce your viewport size to 425px (on Chrome it's equivalent to Mobile L)
3. On the first example, focus the input, type "This is a very long annoying text that break this chip" and press "Enter"
4. See that the text overflow and the trailing icon is not reachable

Expected Behavior

Remove the CSS rule here : https://github.com/angular/components/blame/01d5a9d12cad72a2c2bb6f71baf145d0ff4af13a/src/material/chips/chip.scss#L13

Actual Behavior

Environment

• Angular: 15.1.3
• CDK/Material: 15.1.3
• Browser(s): All
• Operating System (e.g. Windows, macOS, Ubuntu): All