From 00d6de5f81f983f9363dbdc45dd276cad0f31376 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Fri, 10 May 2024 23:38:02 +0000 Subject: [PATCH] fix(material/list): list item truncates on narrow screen widths Fixes issue with Angular Components List component where the list item truncates on narrow screen widths (ie. mobile screens). Removes white-space wrap style and adds some height to primary lines for readability. Fixes b/291296866 --- src/material/list/list.scss | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/material/list/list.scss b/src/material/list/list.scss index 61e246175f42..9d9f59fbac9e 100644 --- a/src/material/list/list.scss +++ b/src/material/list/list.scss @@ -162,15 +162,24 @@ a.mdc-list-item--activated { } } -.mat-mdc-list-item.mdc-list-item--with-three-lines { - // List item lines or titles never wrap. MDC always enables wrapping for secondary text - // if the list item has acquired three lines. We unset these styles for line elements. - // https://github.com/material-components/material-components-web/blob/348665978ce73694ad4518626dd70cdf5b984113/packages/mdc-list/_evolution-mixins.scss#L205-L206. - // TODO: Consider removing once MDC supports the explicit tertiary line list variant. +.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines +.mdc-list-item__primary-text::before { + height: 25px; +} + +.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 + // adjusts .mat-mdc-list-item-title.mdc-list-item__primary-text height + // to accommodate any wrapping text. Fixes: b/247881646. + .mat-mdc-list-item-title.mdc-list-item__primary-text, .mat-mdc-list-item-line.mdc-list-item__secondary-text { - white-space: nowrap; + 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 @@ -218,3 +227,4 @@ mat-action-list button { } } } +