Options button in the commit view is taller than Browse Source

[rhdunn]

Description

1. Open Firefox 118.0.2.
2. Navigate to the "Commits" list on a repository you have edit rights to.
3. Click on the SHA1 hash of a commit.

URL: https://try.gitea.io/rhdunn/test-options-button/commit/ad9c1583bd7bf8f18bf20112494b5ba7b5d25c7f

Investigation

1. Open the developer tools.
2. Highlight the Operations button.
3. Scroll down to the .ui.dropdown rule in the Rules tab.
4. Deselect the line-height: var(--line-height-default) CSS rule.

After step 4 above, the height of the Options button shrinks to the same height as the Browse Source button.

The :root element defines the --line-height-default value as normal.

The .ui.button style has line-height: 1em;. Setting this on the Options div element makes the height consistent.

Conclusion

Firefox is prioritizing the .ui.dropdown rule for the line height when the classes ui dropdown button are used together. I'm not sure about other browsers.

There are several possible ways to fix this:

1. Add a .ui.dropdown.button rule that sets line-height: 1em; consitent with the .ui.button rule.
2. Modify the .ui.dropdown line height to be 1em to be consistent with .ui.button.
3. Replace .ui.button { ... } with .ui.button, .ui.button.dropdown { ... } to make the button rule have a higher CSS priority than .ui.dropdown.

Gitea Version

1.21.0+rc1-23-g21f1e223d

Can you reproduce the bug on the Gitea demo site?

Yes

Log Gist

No response

Screenshots

Git Version

2.34.1

Operating System

Ubuntu

How are you running Gitea?

Building from source using the bindata option.

Database

SQLite

[wxiaoguang]

-> Improve dropdown button alignment and fix hover bug #27632