Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Options button in the commit view is taller than Browse Source #27631

Closed
rhdunn opened this issue Oct 15, 2023 · 1 comment · Fixed by #27632
Closed

Options button in the commit view is taller than Browse Source #27631

rhdunn opened this issue Oct 15, 2023 · 1 comment · Fixed by #27632
Labels
type/bug

Comments

@rhdunn
Copy link

rhdunn commented Oct 15, 2023

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

image

Git Version

2.34.1

Operating System

Ubuntu

How are you running Gitea?

Building from source using the bindata option.

Database

SQLite
@wxiaoguang wxiaoguang mentioned this issue Oct 15, 2023
Merged
@wxiaoguang
Copy link
Contributor

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

@GiteaBot GiteaBot mentioned this issue Oct 16, 2023
Merged
wxiaoguang added a commit that referenced this issue Oct 16, 2023
@wxiaoguang
Improve dropdown button alignment and fix hover bug (#27632)
6c501b1 
1. fix #27631 , and add samples to devtest page
2. fix incorrect color for "ui dropdown button" when hover
GiteaBot pushed a commit to GiteaBot/gitea that referenced this issue Oct 16, 2023
@wxiaoguang @GiteaBot
Improve dropdown button alignment and fix hover bug (go-gitea#27632)
35cec7a 
1. fix go-gitea#27631 , and add samples to devtest page
2. fix incorrect color for "ui dropdown button" when hover
wxiaoguang added a commit that referenced this issue Oct 16, 2023
@GiteaBot @wxiaoguang
Improve dropdown button alignment and fix hover bug (#27632) (#27637)
21c3513 
Backport #27632 by @wxiaoguang

1. fix #27631 , and add samples to devtest page
2. fix incorrect color for "ui dropdown button" when hover

Co-authored-by: wxiaoguang <[email protected]>
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Dec 1, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
type/bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Improve dropdown button alignment and fix hover bug wxiaoguang/gitea
2 participants
@rhdunn @wxiaoguang