forgejo/web_src/js
silverwind 18d13000e9
[PORT] gitea#29831: Prevent layout shift in <overflow-menu> items
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>

---

Conflict resolution: Moved an `:focus` selector to the new CSS rule.
Ref: https://codeberg.org/forgejo/forgejo/issues/2776
(cherry picked from commit 99d7ef50917e8d61798715e1b0b3dc1a99709f27)
2024-03-28 16:09:14 +01:00
..
components Migrate gap helpers to tailwind (#30034) 2024-03-26 19:04:28 +01:00
features Remove remaining jQuery .css code (#30015) 2024-03-26 19:04:28 +01:00
markup Small refactors in anchors.js (#29947) 2024-03-26 19:04:27 +01:00
modules Enforce trailing comma in JS on multiline (#30002) 2024-03-26 19:04:27 +01:00
render Use vitest globals (#27102) 2023-09-27 04:37:13 +00:00
standalone lint: apply lint-frontend-fix 2024-03-26 19:04:28 +01:00
utils Enforce trailing comma in JS on multiline (#30002) 2024-03-26 19:04:27 +01:00
vendor Vendor jquery.are-you-sure with strict mode fixes (#26901) 2023-09-06 00:02:44 +00:00
webcomponents [PORT] gitea#29831: Prevent layout shift in <overflow-menu> items 2024-03-28 16:09:14 +01:00
bootstrap.js Fix JS error and improve error message styles (#29963) 2024-03-26 19:04:26 +01:00
bootstrap.test.js Avoid duplicate JS error messages on UI (#28873) 2024-01-21 14:23:08 +00:00
htmx.js Auto-update the system status in admin dashboard (#29163) 2024-02-17 23:24:31 +01:00
index.js Filter Repositories by type (#29231) 2024-03-06 12:10:46 +08:00
jquery.js Forbid variables containing jQuery collections not having the $ prefix (#29839) 2024-03-20 08:46:30 +01:00
svg.js Enforce trailing comma in JS on multiline (#30002) 2024-03-26 19:04:27 +01:00
svg.test.js Use vitest globals (#27102) 2023-09-27 04:37:13 +00:00
utils.js enforce maxlength in frontend (#29389) 2024-02-26 22:30:27 +01:00
utils.test.js Use vitest globals (#27102) 2023-09-27 04:37:13 +00:00
vitest.setup.js [gitea] Move vitest setup file to root (#29097) 2024-02-10 10:53:43 +01:00