Skip to content

Commit

Permalink
fix(material/list): list item truncates on narrow screenwidths
Browse files Browse the repository at this point in the history
Updates Angular Components List item component height if the
list item has 3 lines. With the previous list item height of
88px the bottom lines letters like 'g' get cut off and less
readable.

Fixes b/247881646
  • Loading branch information
essjay05 committed May 15, 2024
1 parent 08fada5 commit fc8a98a
Showing 1 changed file with 6 additions and 3 deletions.
9 changes: 6 additions & 3 deletions src/material/list/list.scss
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,12 @@ a.mdc-list-item--activated {
height: 25px;
}

// Increased list item height if it has multiple lines so bottom line doesn't get
// cut off.
.mat-mdc-list-item.mdc-list-item--with-three-lines {
min-height: 90px;
}

.mat-mdc-list-item.mdc-list-item--with-three-lines,
.mat-mdc-list-item.mdc-list-item--with-two-lines {
// List item lines must wrap according to GAR 1.18(b). Removing the nowrap and
Expand All @@ -177,9 +183,6 @@ a.mdc-list-item--activated {
white-space: normal;
line-height: normal;
}
.mat-mdc-list-item-title.mdc-list-item__primary-text {
height: 45px;
}

// Unscoped content can wrap if the list item has acquired three lines. MDC implements
// this functionality for secondary text but there is no proper text ellipsis when
Expand Down

0 comments on commit fc8a98a

Please sign in to comment.