bug(option): mat-options with long text lack of gap since v15
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### Is this a regression?
- [X] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
14
### Description
Before v15, `mat-option`s with long text were truncated so their height was always 48px and naturally, a gap was there to well separate each option.
Now the text is no more truncated but a min-height of 48px is applied. If the text of a `mat-option` take only one line the gap remains and there is no problem. But with 2 lines of more, the gap is no more and reading becomes more difficult
### Reproduction
https://stackblitz.com/edit/angular-hjwez5?file=src/styles.scss
### Expected Behavior

```css
.mat-mdc-option {
padding-top: 12px;
padding-bottom: 12px;
box-sizing: border-box;
}
```
### Actual Behavior

### Environment
- Angular: 15.2.0
- CDK/Material: 15.2.0
- Browser(s): All
- Operating System (e.g. Windows, macOS, Ubuntu): All
Contributor guide
Research direction
Start with the linked StackBlitz reproduction, especially src/styles.scss, and inspect the mat-option styling for multi-line text. Done means restoring visible vertical spacing between options with one or more lines while preserving the expected 48px spacing for single-line options.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, css, typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100