From 9d336a84963772b356b7f6f476c9e09b46f2c262 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Fri, 7 Jun 2024 18:30:18 +0000 Subject: [PATCH] fix(material/list): list item truncates on narrow screen widths 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 --- src/material/list/list.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/material/list/list.scss b/src/material/list/list.scss index 5ee5b59e8886..cf12baf2e88e 100644 --- a/src/material/list/list.scss +++ b/src/material/list/list.scss @@ -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, @@ -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.