From fc8a98a56290e9ac59a4dbc84f67370d10f6b26a Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Tue, 14 May 2024 21:27:32 +0000 Subject: [PATCH] fix(material/list): list item truncates on narrow screenwidths 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 --- src/material/list/list.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/material/list/list.scss b/src/material/list/list.scss index 9d9f59fbac9e..444f3baee3be 100644 --- a/src/material/list/list.scss +++ b/src/material/list/list.scss @@ -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 @@ -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