github-starred/gitea
2
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-03-22 06:24:14 -05:00
Code Issues 2.6k Packages Projects Releases 100 Wiki Activity

Emoji Within Issue Labels Cause Differing Heights #11821

New Issue
Closed
opened 2025-11-02 09:48:49 -06:00 by GiteaMirror · 7 comments
GiteaMirror commented 2025-11-02 09:48:49 -06:00
Owner
Copy Link

Originally created by @JamieSharpe on GitHub (Oct 9, 2023).

Description

If you create issue labels that contain emojis then the height of the element differs depending on:

  • which emoji is used.
  • If the label is marked as exclusive.
  • If the label is viewed in the label settings page, or on an issue page.

A sample may be shown at this gitea repository.

Screenshots

Note: the last issue is marked as exclusive.

As seen in my browser on the Issue page:

2023-10-09 - 19-08-06-338 - firefox

As seen in my browser on the Label page:
Note: The issue description is the rendered layout size measured in my browser.

2023-10-09 - 19-08-41-778 - firefox

As seen in my browser on the Issue page when disabled the following lines:

2023-10-09 - 19-10-45-007 - firefox

As seen in my browser on the Label page when disabled the following lines:

2023-10-09 - 19-11-33-257 - firefox

Gitea Version

1.20.5 & 1.22.0~dev-117-g5a7ab86b9

Can you reproduce the bug on the Gitea demo site?

Yes

Operating System

Windows 10

Browser Version

Firefox 118.0.1 (64-bit)

Originally created by @JamieSharpe on GitHub (Oct 9, 2023). ### Description If you create issue labels that contain emojis then the height of the element differs depending on: * which emoji is used. * If the label is marked as `exclusive`. * If the label is viewed in the label settings page, or on an issue page. A sample may be shown at [this gitea repository](https://gitea.com/JSharpe/IssueTemplates/issues/1). ### Screenshots Note: the last issue is marked as exclusive. As seen in my browser on the Issue page: ![2023-10-09 - 19-08-06-338 - firefox](https://github.com/go-gitea/gitea/assets/1139365/16cd933f-e111-47b8-b686-c7e58d1415b6) As seen in my browser on the Label page: Note: The issue description is the rendered layout size measured in my browser. ![2023-10-09 - 19-08-41-778 - firefox](https://github.com/go-gitea/gitea/assets/1139365/58d5dd85-049a-4118-b397-f292f704c059) As seen in my browser on the Issue page when disabled the following lines: * [/web_src/css/base.css : Line 1831](https://github.com/go-gitea/gitea/blob/e2e0280108cd0cfa4aaa7a875b2c81f17b1352e1/web_src/css/base.css#L1831C21-L1831C21) * [/web_src/css/base.css : Line 1832](https://github.com/go-gitea/gitea/blob/e2e0280108cd0cfa4aaa7a875b2c81f17b1352e1/web_src/css/base.css#L1832C21-L1832C21) ![2023-10-09 - 19-10-45-007 - firefox](https://github.com/go-gitea/gitea/assets/1139365/17847ea4-1ce8-4624-9a76-44d850c835f5) As seen in my browser on the Label page when disabled the following lines: * [/web_src/css/base.css : Line 1831](https://github.com/go-gitea/gitea/blob/e2e0280108cd0cfa4aaa7a875b2c81f17b1352e1/web_src/css/base.css#L1831C21-L1831C21) * [/web_src/css/base.css : Line 1832](https://github.com/go-gitea/gitea/blob/e2e0280108cd0cfa4aaa7a875b2c81f17b1352e1/web_src/css/base.css#L1832C21-L1832C21) ![2023-10-09 - 19-11-33-257 - firefox](https://github.com/go-gitea/gitea/assets/1139365/caabf49e-3ac6-4f90-ae79-a16cf8760fe5) ### Gitea Version 1.20.5 & 1.22.0~dev-117-g5a7ab86b9 ### Can you reproduce the bug on the Gitea demo site? Yes ### Operating System Windows 10 ### Browser Version Firefox 118.0.1 (64-bit)
GiteaMirror added the topic/uiissue/needs-feedback labels 2025-11-02 09:48:49 -06:00
GiteaMirror commented 2025-11-02 09:48:50 -06:00
Author
Owner
Copy Link

@JamieSharpe commented on GitHub (Oct 9, 2023):

I've been thinking on how this may be fixed:

  • Remove the lines mentioned above. But this would globally change how emojis are displayed.
  • Add a targeted CSS filter such as .label > .emoji with the above rules removed/default.
@JamieSharpe commented on GitHub (Oct 9, 2023): I've been thinking on how this may be fixed: * Remove the lines mentioned above. But this would globally change how emojis are displayed. * Add a targeted CSS filter such as `.label > .emoji` with the above rules removed/default.
GiteaMirror commented 2025-11-02 09:48:50 -06:00
Author
Owner
Copy Link

@JamieSharpe commented on GitHub (Oct 9, 2023):

I can also confirm the rendering is present on Android Chrome (v117.0.5938.153).

Screenshot_20231009_223601_Chrome

@JamieSharpe commented on GitHub (Oct 9, 2023): I can also confirm the rendering is present on Android Chrome (v117.0.5938.153). ![Screenshot_20231009_223601_Chrome](https://github.com/go-gitea/gitea/assets/1139365/acc309f8-9c4e-4d41-91ec-eb9e445f81d9)
GiteaMirror commented 2025-11-02 09:48:51 -06:00
Author
Owner
Copy Link

@wxiaoguang commented on GitHub (Oct 10, 2023):

I somewhat knows the history.

At the beginning, people would like to make the emoji slightly larger, to make it look better.

But when the labels with/without emoji are mixed together, then the alignment problem occurs.

To make the height consistent, IMO there could be 2 possible solutions:

  1. Like what you have done, do not enlarge the emoji.
  2. Always enlarge the emoji (like before), while make the label's default height match the enlarged emoji.

I am not sure which one is liked by most people, personally I can accept solution 1.

@wxiaoguang commented on GitHub (Oct 10, 2023): I somewhat knows the history. At the beginning, people would like to make the emoji slightly larger, to make it look better. But when the labels with/without emoji are mixed together, then the alignment problem occurs. To make the height consistent, IMO there could be 2 possible solutions: 1. Like what you have done, do not enlarge the emoji. 2. Always enlarge the emoji (like before), while make the label's default height match the enlarged emoji. I am not sure which one is liked by most people, personally I can accept solution 1.
GiteaMirror commented 2025-11-02 09:48:51 -06:00
Author
Owner
Copy Link

@JamieSharpe commented on GitHub (Oct 13, 2023):

I prefer option 1 as well, but localise it just to the labels to keep the historic decision of larger emojis for use in comments/titles.

I propose this additional rule to be added to the base.css class:

.label>.emoji
{
    font-size: .857143rem;
    line-height: 1.3;
}

I chose the above values based on the following:

  • 857143rem -> 2023-10-13 - 19-48-53-387 - firefox
  • 1.3 -> 2023-10-13 - 19-49-41-591 - firefox

The above values are the next in inheritence when the .emoji, .reaction respective rules are removed.

I tried to find the above rules in the current main and release/v1.21 branches to provide a potential pull request in the future, but my live testing was on 1.22.0+dev-151-ge2e028010 at the example URL above where these screenshots were taken.

@JamieSharpe commented on GitHub (Oct 13, 2023): I prefer option 1 as well, but localise it just to the labels to keep the historic decision of larger emojis for use in comments/titles. I propose this additional rule to be added to the `base.css` class: ```css .label>.emoji { font-size: .857143rem; line-height: 1.3; } ``` I chose the above values based on the following: * `857143rem` -> ![2023-10-13 - 19-48-53-387 - firefox](https://github.com/go-gitea/gitea/assets/1139365/d300c515-0e34-4fdf-a26d-a16cd971de07) * `1.3` -> ![2023-10-13 - 19-49-41-591 - firefox](https://github.com/go-gitea/gitea/assets/1139365/45174a13-bae3-491c-98e2-2bb0f0b97805) The above values are the next in inheritence when the `.emoji, .reaction` respective rules are removed. I tried to find the above rules in the current [`main`](https://github.com/go-gitea/gitea/tree/main) and [`release/v1.21`](https://github.com/go-gitea/gitea/tree/release/v1.21) branches to provide a potential pull request in the future, but my live testing was on `1.22.0+dev-151-ge2e028010` at the [example URL](https://gitea.com/JSharpe/IssueTemplates/issues/1) above where these screenshots were taken.
GiteaMirror commented 2025-11-02 09:48:51 -06:00
Author
Owner
Copy Link

@JamieSharpe commented on GitHub (Oct 14, 2023):

From Discord:

wxiaoguang: Maybe they come from Fomantic UI css

I found one of the rules amongst Fomantic UI and another from inside Gitea.

As gitea is already overriding the emoji style, I still think my previous proposal would be best fitting. The down side is the hard coded value taken from Fomantic-UI.

An alternative is to completely remove the historic design of a larger emoji, which would then go back to inheriting from Fomantic-UI: Defaulting to a size suitable to the emojis parent.

Another way would be to increase the height of all labels (applying to all variations of text and emoji content), but this would make the majority of labels rather large, when emoji use within a label I believe is a niche case.

@JamieSharpe commented on GitHub (Oct 14, 2023): From [Discord](https://discord.gg/Gitea): > wxiaoguang: Maybe they come from Fomantic UI css I found one of the rules amongst [Fomantic UI](https://github.com/fomantic/Fomantic-UI) and another from inside [Gitea](https://github.com/go-gitea/gitea). * [`font-size: @medium;`](https://github.com/fomantic/Fomantic-UI/blob/develop/src/definitions/elements/label.less#L1022) * [`.labels-list .label`](https://github.com/go-gitea/gitea/blob/ae419fa49403537725c806a5f3f1e5b274f52eb7/web_src/css/repo.css#L2431C62-L2431C62) As gitea is already overriding the emoji style, I still think my previous proposal would be best fitting. The down side is the hard coded value taken from Fomantic-UI. An alternative is to completely remove the historic design of a larger emoji, which would then go back to inheriting from Fomantic-UI: Defaulting to a size suitable to the emojis parent. Another way would be to increase the height of all labels (applying to all variations of text and emoji content), but this would make the majority of labels rather large, when emoji use within a label I believe is a niche case.
GiteaMirror commented 2025-11-02 09:48:52 -06:00
Author
Owner
Copy Link

@wxiaoguang commented on GitHub (Dec 8, 2024):

It should have been fixed in 1.22 (or 1.23)?

image

@wxiaoguang commented on GitHub (Dec 8, 2024): It should have been fixed in 1.22 (or 1.23)? ![image](https://github.com/user-attachments/assets/4259c52b-71e2-4db8-8faa-16ad7926ce5a)
GiteaMirror commented 2025-11-02 09:48:52 -06:00
Author
Owner
Copy Link

@wxiaoguang commented on GitHub (Dec 15, 2024):

Feel free to re-open if there is still a problem

@wxiaoguang commented on GitHub (Dec 15, 2024): Feel free to re-open if there is still a problem
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
$20
$250
$50
$500
backport/done
💎 Bounty
docs-update-needed
good first issue
hacktoberfest
issue/bounty
issue/confirmed
issue/critical
issue/duplicate
issue/needs-feedback
issue/not-a-bug
issue/regression
issue/stale
issue/workaround
lgtm/need 2
modifies/api
modifies/translation
outdated/backport/v1.18
outdated/theme/markdown
outdated/theme/timetracker
performance/bigrepo
performance/cpu
performance/memory
performance/speed
pr/breaking
proposal/accepted
proposal/rejected
pr/wip
pull-request
Mirrored from GitHub Pull Request
 reviewed/wontfix
💰 Rewarded
skip-changelog
status/blocked
topic/accessibility
topic/api
topic/authentication
topic/build
topic/code-linting
topic/commit-signing
topic/content-rendering
topic/deployment
topic/distribution
topic/federation
topic/gitea-actions
topic/issues
topic/lfs
topic/mobile
topic/moderation
topic/packages
topic/pr
topic/projects
topic/repo
topic/repo-migration
topic/security
topic/theme
topic/ui
topic/ui-interaction
topic/ux
topic/webhooks
topic/wiki
type/bug
type/deprecation
type/docs
type/enhancement
type/feature
type/miscellaneous
type/proposal
type/question
type/refactoring
type/summary
type/testing
type/upstream
No Label issue/needs-feedback topic/ui
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/gitea#11821
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?