Misc CSS fixes #35888

silverwind · 2025-11-06T21:54:13Z

Contains a number of minor CSS fixes.

Fix missing border on targeted speech bubble

Add padding to inline comments, slightly more padding around emoji button

Center text on header in code search results

Tweak emoji selector, reducing font size primarily

Minor tweaks to repo sidebar, reduce font size by 1px, center "Release" text with label.

Fix issue comment buttons being misaligned on mobile

Add highlight to actions re-run icon

Fix actions re-run button overflow

templates/repo/home_sidebar_bottom.tmpl

Signed-off-by: silverwind <me@silverwind.io>

web_src/css/repo/reactions.css

templates/shared/search/code/results.tmpl

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Signed-off-by: silverwind <me@silverwind.io>

silverwind · 2025-11-07T12:26:11Z

One more fix added to improve the issue timeline:

Before (content breaks out of box):

After (content is wrapped and slightly more compact):

silverwind · 2025-11-07T12:59:18Z

This damn history is so finicky, thanks for catching.

wxiaoguang · 2025-11-07T12:59:45Z

This damn history is so finicky, thanks for catching.

Because there are so many hacky patches, unclear names, style conflicts.

silverwind · 2025-11-07T13:06:09Z

Yes, it needs a redesign. I've reverted part of the changes, now it's only doing the wrapping (padding so it does not wrap exactly at element right side):

Line height is way too much here but I see no easy fix. The old code never assumed text to wrap.

wxiaoguang · 2025-11-07T14:04:27Z

Line height is way too much here but I see no easy fix. The old code never assumed text to wrap.

Interesting, the regressions are all related to that problematic "line-height" 🤣

wxiaoguang · 2025-11-07T14:06:52Z

templates/repo/issue/view_content/add_reaction.tmpl

@@ -1,5 +1,5 @@
 {{if ctx.RootData.IsSigned}}
-<div class="item action ui dropdown jump pointing top right select-reaction" data-action-url="{{.ActionURL}}">
+<div class="item action ui dropdown jump pointing top right select-reaction tw-px-[5px]" data-action-url="{{.ActionURL}}">


Why it has 5px padding but the other one doesn't:

I wanted to add a bit more spacing around the emoji button, but at the same time not introduce too much spacing between the labels. I guess the clean solution is to put the labels into their own <div> and apply different gaps.

By the way, the UI has different cases.

On "diff" page, the layout is like this, it doesn't show "role" labels, but "review" or "pending" labels.

And the "emoji" dropdown sometimes can be hidden templates/repo/diff/comments.tmpl.

I think we need a unified UI layout to cover these cases.

wxiaoguang · 2025-11-07T14:08:58Z

web_src/css/repo.css

  line-height: 32px;
  vertical-align: middle;
  color: var(--color-text-light);
+  overflow-wrap: break-word;


Why it is needed? IIRC break-word is already inherited from body

A unbroken string of text did not wrap without it. Guess I will check what can be done with inheritance.

wxiaoguang · 2025-11-07T14:09:41Z

web_src/css/repo.css

+  max-width: 100%;
+  padding-right: 1rem;


Why it needs these two new styles?

I don't see difference.

Without it, a unbroken line will wrap exactly at the end of the element, which looks visually unpleasing without any spacing.

padding-right: 1rem;: add extra space for wrapped content?

max-width: 100%;: what does this do?

wxiaoguang · 2025-11-07T14:13:29Z

web_src/css/repo.css

  background: transparent;
  border-bottom: 0;
  padding: 0;
+  min-height: auto;


Maybe the min-height: 41px should be removed from .comment-header, then no need to add a new min-height: auto; here?

If the header of regular comments can naturally size to 41px, then yes, this woul not be needed.

The "min-height: 41px" is from #13463

Do you still remember the reason, maybe it is used to align the triangles? Maybe it's better to add some comments.

And the min-height: 41px can be only applied to .comment-header.avatar-content-left-arrow

wxiaoguang · 2025-11-07T14:14:25Z

web_src/css/repo.css

  border-bottom: 0;
  padding: 0;
+  min-height: auto;
+  margin-bottom: 4px;


The margin can be provided by .repository.view.issue .comment-list .code-comment .comment-content, it already has other margin spaces.

Maybe, this margin is just to introduce a bit more whitespace between comment and header. Maybe a gap will also work.

wxiaoguang · 2025-11-07T14:17:11Z

web_src/css/repo.css

+  margin: 0 -4px;
+  padding: 8px;


The spaces are provided by .repository.view.issue .comment-list .ui.comments, so I think we should avoid the new negative margins.

Idk, the negative margin allows the item to "hang" slightly outside which is nice. Mabye there are better solutions, the current spacing is optimal imho.

I think it's a good time to clean up legacy style conflicts, then it will be easier to make more UI improvements.

And we don't need to fully backport these changes.

silverwind added 2 commits November 6, 2025 22:45

Misc CSS fixes

5873e8a

fix

b95cc38

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Nov 6, 2025

github-actions bot added modifies/templates This PR modifies the template files modifies/frontend labels Nov 6, 2025

silverwind added the backport/v1.25 label Nov 6, 2025

silverwind commented Nov 6, 2025

View reviewed changes

templates/repo/home_sidebar_bottom.tmpl Outdated Show resolved Hide resolved

silverwind added 3 commits November 6, 2025 22:59

Update templates/repo/home_sidebar_bottom.tmpl

4726f43

Signed-off-by: silverwind <me@silverwind.io>

add margin

be8392c

cleanup

97a05d9

delvh approved these changes Nov 6, 2025

View reviewed changes

web_src/css/repo/reactions.css Show resolved Hide resolved

GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Nov 6, 2025

wxiaoguang reviewed Nov 7, 2025

View reviewed changes

templates/shared/search/code/results.tmpl Outdated Show resolved Hide resolved

flex-text-block

6e00ba1

wxiaoguang reviewed Nov 7, 2025

View reviewed changes

templates/shared/search/code/results.tmpl Outdated Show resolved Hide resolved

silverwind and others added 2 commits November 7, 2025 11:27

Update templates/shared/search/code/results.tmpl

204404b

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Signed-off-by: silverwind <me@silverwind.io>

improve issue timeline wrapping and padding

9336b31

This comment was marked as resolved.

Sign in to view

wxiaoguang marked this pull request as draft November 7, 2025 12:52

This comment was marked as resolved.

Sign in to view

fix regressions

da2aea9

wxiaoguang reviewed Nov 7, 2025

View reviewed changes

Uh oh!

Misc CSS fixes #35888

Are you sure you want to change the base?

Misc CSS fixes #35888

Conversation

silverwind commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

silverwind commented Nov 7, 2025

Uh oh!

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

silverwind commented Nov 7, 2025

Uh oh!

wxiaoguang commented Nov 7, 2025

Uh oh!

silverwind commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wxiaoguang commented Nov 7, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

silverwind Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wxiaoguang Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

silverwind commented Nov 6, 2025 •

edited

Loading

silverwind commented Nov 7, 2025 •

edited

Loading

silverwind Nov 7, 2025 •

edited

Loading

wxiaoguang Nov 7, 2025 •

edited

Loading