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