angular / angular/components

bug(list): Misalignment with list with three lines

Open
#28,648 1 comment 0 reactions 0 assignees View on GitHub
area: material/list P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Description

If you check the examples in the material site, you'll see that there's a even space beetween lines.

https://m2.material.io/components/lists

![image](https://github.com/angular/components/assets/12090931/89325b00-5057-409e-90c1-a63335d2466d)

If you check the examples in angular.material site, there's an misalignment beetween the second and thrird line

https://material.angular.io/components/list/examples#list-variants

![image](https://github.com/angular/components/assets/12090931/090ab3f4-5933-4bc1-bfd7-8182531cd3cf)

### Expected Behavior

Space beetween line 2 and 3 should the even.

![image](https://github.com/angular/components/assets/12090931/a3ca9bf9-62d6-4c56-a286-df5c19cd07cf)

### Actual Behavior

There's an extra space beetween the lines.

### Environment

- Angular: 16.1.7

Contributor guide

Open the contributing guide

Research direction

Start by comparing the Material Design lists page with the Angular Material list-variants example linked in the issue, focusing on the three-line list layout. Locate the Angular list implementation and its relevant tests, then verify that the spacing between lines two and three matches the expected even spacing shown in the report.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.