Navbar width horizontal overflow in 1.20rc

[noahziheng]

Description

Hi all,

I find Gitea UI showing horizontal scrollbar when the content is more than screen like screen shot case. Look like the navbar has overflow its container.

It can be found in try.gitea.io at: https://try.gitea.io/explore/repos

Actually I never found this issue under 1.20-rc.

Maybe the problem is similar with this post, and we can add max-width: 100% or overflow-x: hidden to solve it.

Screenshots

Gitea Version

1.20.0+rc0-17-g3e9fc3672

Can you reproduce the bug on the Gitea demo site?

Yes

Operating System

MacOS Ventura & Windows 11

Browser Version

Microsoft Edge 114.0.1823.37

[wxiaoguang]

It's not related to navbar.

IMO actually is a regression of #21850

You can see I have remove the "navbar" and "footer", only "page-content" there:

[noahziheng]

@wxiaoguang Actually the scrollbar will invisble if I remove navbar element

[wxiaoguang]

Actually the scrollbar will invisble if I remove navbar element

But it is there in my screenshot, have you tried different pages and different sizes? In some cases "removing navbar element" makes the scrollbar invisible, but in some cases the UI is still not right. That's why I do not think the navbar is the root problem, while there is something wrong behind it.

[wxiaoguang]

Can you try this one? Revert overflow: overlay (revert #21850) #25231

[noahziheng]

Can you try this one? Revert overflow: overlay (revert #21850) #25231

Looks effective! This revert may cover more case in the UI.

[noahziheng]

@wxiaoguang But this revert will just hide horizontal scrollbar(because it's not overlay yet).
The navbar(and/or other element we have not find) 's width always exceed its container.

[wxiaoguang]

See #25231 (comment)