Skip to content

Commit 9e08fcc

Browse files
committed
fix(material/list): list truncates on narrow width screens
Fixes Angular Components List item component with and without a leading avatar if it is has multiple lines for the height to auto adjust based on the content. Added padding-bottom for list items with a leading icon/avatar/checkbox to improve readability. Fixes b/291296866
1 parent b4fda14 commit 9e08fcc

File tree

1 file changed

+10
-3
lines changed

1 file changed

+10
-3
lines changed

src/material/list/list.scss

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -168,13 +168,20 @@ a.mdc-list-item--activated {
168168
}
169169

170170
// Increased list item height if it has multiple lines so bottom line doesn't get
171-
// cut off.
172-
.mat-mdc-list-item.mdc-list-item--with-three-lines {
173-
min-height: 90px;
171+
// cut off. Also added padding-bottom so there's space btw the text and the divider.
172+
.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,
173+
.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,
174+
.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines,
175+
.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-three-lines,
176+
.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-three-lines,
177+
.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-three-lines {
178+
height: auto;
179+
padding-bottom: 8px;
174180
}
175181

176182
.mat-mdc-list-item.mdc-list-item--with-three-lines,
177183
.mat-mdc-list-item.mdc-list-item--with-two-lines {
184+
height: auto;
178185
// List item lines must wrap according to GAR 1.18(b). Removing the nowrap and
179186
// adjusts .mat-mdc-list-item-title.mdc-list-item__primary-text height
180187
// to accommodate any wrapping text. Fixes: b/247881646.

0 commit comments

Comments
 (0)