Improve project/milestone list

[yp05327]

Project list
Before:

After:

Milestone List
Before:

After:

ps: It seems that project list is a copy of milestone list, and we have made some changes to milestone list.
Then we need to sync the changes to project list.

[yp05327]

The icons here seems strange 😕
Maybe we need also fix it in milestone list.

[silverwind]

Yes, it's a blatant copy as seen here. Possible to fix these to projects? CSS may need adjustment.

[silverwind]

The icons here seems strange 😕 Maybe we need also fix it in milestone list.

Yes, vertical center via a wrapper element possibly and gt-df gt-ac

[wxiaoguang]

The icons here seems strange 😕 Maybe we need also fix it in milestone list.

Yes, vertical center via a wrapper element possibly and gt-df gt-ac

After #24476 , the svg icons should be display:inline-block + vertical-align:middle , by default.

[silverwind]

display:inline-block + vertical-align:middle

I recall this is not a general solution and may still cause misalignment depending on icon size, text size and line height. There simply seems to be no universal way to vertically center a SVG with text in 100% of cases.

[wxiaoguang]

may still cause misalignment depending on icon size

Do the best to use the same icon side as the font size everywhere. That's why font-awesome could win in such case.

[yp05327]

The icons here seems strange 😕 Maybe we need also fix it in milestone list.

Yes, vertical center via a wrapper element possibly and gt-df gt-ac

I fixed this by use gt-ml-3. Maybe it is not the best/correct way.
@silverwind @wxiaoguang
You are welcome to push commits/PR to fix it in the best/correct way. 😄

ps: the word size is 19, so I also adjusted the svg size.

[silverwind]

ps: the word size is 19, so I also adjusted the svg size.

It looks still somewhat broken, the issue icon is noticeable smaller than the calendar icon. Should check how issue list renders its icons, we don't have such issues there I suppose.

I will check it later and likely push some fixes.

[yp05327]

It seems that this is fixed in #25315