Skip to content

Commit

Permalink
fix(material/list): list item truncates on narrow screen widths
Browse files Browse the repository at this point in the history
Updates fix for Angular Components List component where the list
item truncates on narrow screen widths (ie. mobile screens).
Updates the padding to be more cohesive with previous styling.

Fixes b/291296866
  • Loading branch information
essjay05 committed Jun 12, 2024
1 parent 489edae commit 9d336a8
Showing 1 changed file with 2 additions and 6 deletions.
8 changes: 2 additions & 6 deletions src/material/list/list.scss
Original file line number Diff line number Diff line change
Expand Up @@ -162,11 +162,6 @@ a.mdc-list-item--activated {
}
}

.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines
.mdc-list-item__primary-text::before {
height: 25px;
}

// Increased list item height if it has multiple lines so bottom line doesn't get
// cut off. Also added padding-bottom so there's space btw the text and the divider.
.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,
Expand All @@ -176,12 +171,13 @@ a.mdc-list-item--activated {
.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-three-lines,
.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-three-lines {
height: auto;
padding-bottom: 12px;
padding-bottom: 16px;
}

.mat-mdc-list-item.mdc-list-item--with-three-lines,
.mat-mdc-list-item.mdc-list-item--with-two-lines {
height: auto;
padding: 13px;
// List item lines must wrap according to GAR 1.18(b). Removing the nowrap and
// adjusts .mat-mdc-list-item-title.mdc-list-item__primary-text height
// to accommodate any wrapping text. Fixes: b/247881646.
Expand Down

0 comments on commit 9d336a8

Please sign in to comment.