1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-11-22 08:42:32 -05:00
forgejo/web_src/css
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
..
chroma Chroma color tweaks (#26978) 2023-09-08 11:03:01 -05:00
codemirror Remove EasyMDE focus outline on text (#25328) 2023-06-18 04:10:07 +00:00
editor Clean up diff header css and reduce global textarea min-height (#29232) 2024-02-19 22:58:33 +01:00
features Fix various loading states, remove .loading class (#29920) 2024-03-26 19:04:26 +01:00
markup [gitea] Make blockquote border size less aggressive (#29124) 2024-02-11 13:47:46 +01:00
modules Refactor repo header/list (#29969) 2024-03-27 09:22:24 +01:00
repo [PORT] gitea#29831: Prevent layout shift in <overflow-menu> items 2024-03-28 16:09:14 +01:00
shared Add <overflow-menu>, rename webcomponents (#29400) 2024-03-20 08:46:29 +01:00
standalone Add toasts to UI (#25449) 2023-06-27 02:45:24 +00:00
themes Misc color tweaks (#29943) 2024-03-26 19:04:26 +01:00
actions.css Replace 10 more gt- classes with tw- (#29945) 2024-03-26 19:04:27 +01:00
admin.css User details page (#26713) 2023-08-31 11:21:18 +02:00
base.css [PORT] gitea#29831: Prevent layout shift in <overflow-menu> items 2024-03-28 16:09:14 +01:00
dashboard.css Remove the negative margin from .page-content (#29922) 2024-03-26 19:04:26 +01:00
explore.css Introduce flex-list & flex-item elements for Gitea UI (#25790) 2023-08-01 00:13:42 +02:00
font_i18n.css Fix @font-face overrides (#24855) 2023-05-24 01:48:51 +00:00
form.css Merge pull request '[PORT] Unify search boxes (gitea#29530)' (#2688) from snematoda/port-29530 into forgejo 2024-03-24 05:33:13 +00:00
helpers.css Refactor repo header/list (#29969) 2024-03-27 09:22:24 +01:00
home.css [BRANDING] Add Forgejo light, dark, and auto themes 2024-02-05 16:02:13 +01:00
index.css Remove fomantic grid module (#29894) 2024-03-26 19:04:26 +01:00
install.css Make "install page" respect environment config (#25648) 2023-07-09 22:43:37 +00:00
org.css Unify organizations header (#29248) 2024-02-26 22:30:26 +01:00
repo.css Refactor clone-panel styles (#29861) 2024-03-26 19:04:24 +01:00
review.css Replace all simple inline styles with tailwind (#30032) 2024-03-26 19:04:28 +01:00
user.css Remove the negative margin from .page-content (#29922) 2024-03-26 19:04:26 +01:00