0
0
mirror of https://github.com/go-gitea/gitea.git synced 2025-01-19 19:52:27 +01:00
gitea/web_src/js
silverwind 99d7ef5091
Prevent layout shift in <overflow-menu> items (#29831)
There is a small layout shift in when active tab changes. Notice how the
actions SVG is unstable:


![](https://github.com/go-gitea/gitea/assets/115237/a6928e89-5d47-4a91-8f36-1fa22fddbce7)

This is because the active item with bold text is wider then the
inactive one. I have applied [this
trick](https://stackoverflow.com/a/32570813/808699) to prevent this
layout shift. It's only active inside `<overflow-menu>` because I wanted
to avoid changing HTML and doing it in regular JS would cause a flicker.
I don't expect us to introduce other similar menus without
`<overflow-menu>`, so that place is likely fine.


![after](https://github.com/go-gitea/gitea/assets/115237/d6089924-8de6-4ee0-8db4-15f16069a131)

I also changed the weight from 500 to 600, slightly reduced horizontal
padding, merged some tab-bar related CSS rules and a added a small
margin below repo-header so it does not look so crammed against the
buttons on top.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-03-20 17:00:35 +00:00
..
components Migrate border and margin classes to Tailwind (#29828) 2024-03-18 14:47:05 +00:00
features Remove jQuery .attr from the user search box (#29919) 2024-03-20 00:09:52 +00:00
markup Use more specific selector for name links (#29679) 2024-03-08 23:21:45 +00:00
modules Forbid HTML injection using jQuery (#29843) 2024-03-16 13:25:27 +00:00
render
standalone
utils Support pasting URLs over markdown text (#29566) 2024-03-08 15:15:58 +00:00
vendor
webcomponents Prevent layout shift in <overflow-menu> items (#29831) 2024-03-20 17:00:35 +00:00
bootstrap.js Suppress error from monaco-editor (#29684) 2024-03-09 18:37:29 +01:00
bootstrap.test.js
htmx.js
index.js Filter Repositories by type (#29231) 2024-03-03 10:18:34 +00:00
jquery.js Forbid variables containing jQuery collections not having the $ prefix (#29839) 2024-03-16 12:22:16 +00:00
svg.js Artifact deletion in actions ui (#27172) 2024-02-18 10:33:50 +00:00
svg.test.js
utils.js enforce maxlength in frontend (#29389) 2024-02-25 14:31:15 +00:00
utils.test.js
vitest.setup.js