Strange green point in dashboard repo list

[yp05327]

Description

I think this comes from #26520

(Using Chrome on Windows)
@silverwind

Gitea Version

latest

Can you reproduce the bug on the Gitea demo site?

Yes

Log Gist

No response

Screenshots

No response

Git Version

No response

Operating System

No response

How are you running Gitea?

build

Database

None

[yp05327]

[silverwind]

It's a scrollbar. Seems to be some Chrome-only issue because it works. Adding overflow-y: clip does seem to help for the scrollbar but does not fix the "g" cutoff, hmm. Maybe we should revert to overflow: hidden and set a proper line-height where necessary.

[wxiaoguang]

JS Fiddle: https://jsfiddle.net/6Ltbd581/16/

(ps: the line-height: 1 comes from Fomantic UI's menu item)

Chrome:

[silverwind]

line-height: 1 is the root of the problem, I think at minimum 1.2 is recommended (roughly equivalnt to normal), but I would go for 1.4 to be safe as the right value depends on font in use and we get different fonts on different OSs.

[wxiaoguang]

The "more"root problem seems that Chrome doesn't consider "descent" into the line-height .... so characters like "g" / "y" causes layout problems .....

[wxiaoguang]

-> Fix various line-height styles #26553

[yp05327]

@wxiaoguang @silverwind
It seems that this is not completely fixed, I can still see these green things.

in try.gitea.io

in local

local version:

[yp05327]

Ah, I see. this green thing is a scrollbar. 😄

(removed overflow-x)

[yp05327]

when --line-height-default is 1.20, it will disappear

the lowest value is 1.18

[wxiaoguang]

Then the "modules/normalize.css" should also be changed accordingly

[silverwind]

BTW, there is also this useless style in effect on these strings, which results in the too-early truncation. We should remove it, text truncates fine without it as well.

.dashboard.feeds .filter.menu .item .text.truncate,
.dashboard.issues .filter.menu .item .text.truncate {
  width: 75%;
}

Then the "modules/normalize.css" should also be changed accordingly

Not sure I follow. Value is the same there, but I agree we could variablize it.

[yp05327]

Does --line-height related to screen resolution?
My display is 1920 x 1080.

[silverwind]

No, line-height only depends on the font's intrinsic height.

[wxiaoguang]

-> Use line-height: 1.2 for default #26635